@wulperstudio/cms/organisms/MenuResponsive/MenuResponsive.js

Wulper Studio Library Components CMS

/* eslint-disable no-unused-expressions */
import React from 'react';
import { v4 } from 'uuid';
import { Icon } from '@iconify/react';
import { Drawer, ListItemButton, ListItemIcon, ListItemText, useTheme, Stack } from '@mui/material';
import { ListContainer } from './styled';
import { ICONS_NAME } from '../../helpers/icons';
import { IconButtonComponent } from '../../components/IconButtonComponent';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export var MenuResponsive = function MenuResponsive(_ref) {
  var options = _ref.options,
    drawerProps = _ref.drawerProps,
    isChildren = _ref.isChildren,
    children = _ref.children,
    openMenu = _ref.openMenu,
    handleMenuOpen = _ref.handleMenuOpen,
    iconProps = _ref.iconProps;
  var theme = useTheme();
  return /*#__PURE__*/_jsxs("div", {
    children: [/*#__PURE__*/_jsx(IconButtonComponent, {
      iconProps: {
        onClick: function onClick() {
          return handleMenuOpen && handleMenuOpen();
        },
        sx: {
          backgroundColor: 'transparent'
        }
      },
      children: /*#__PURE__*/_jsx(Icon, Object.assign({
        icon: ICONS_NAME.menuHamburger,
        color: theme.palette.text.primary
      }, iconProps))
    }), openMenu && /*#__PURE__*/_jsx(Drawer, Object.assign({
      anchor: "left",
      open: openMenu,
      onClose: handleMenuOpen
    }, drawerProps, {
      children: isChildren ? children : /*#__PURE__*/_jsxs(_Fragment, {
        children: [/*#__PURE__*/_jsx(Stack, {
          direction: "row",
          justifyContent: "flex-end",
          alignItems: "center",
          sx: {
            minHeight: 60,
            px: '0.5rem'
          },
          children: /*#__PURE__*/_jsx(IconButtonComponent, {
            iconProps: {
              sx: {
                backgroundColor: 'transparent'
              }
            },
            children: /*#__PURE__*/_jsx(Icon, {
              icon: ICONS_NAME.close,
              color: theme.palette.text.primary,
              onClick: handleMenuOpen
            })
          })
        }), /*#__PURE__*/_jsx(ListContainer, {
          children: options && options.map(function (op) {
            return /*#__PURE__*/_jsxs(ListItemButton, {
              selected: op.active,
              onClick: function onClick() {
                handleMenuOpen && handleMenuOpen();
                op.toRoute && op.toRoute();
              },
              sx: {
                width: '100%'
              },
              children: [/*#__PURE__*/_jsx(ListItemIcon, {
                children: op.icon
              }), /*#__PURE__*/_jsx(ListItemText, {
                primary: op.text
              })]
            }, v4());
          })
        })]
      })
    }))]
  });
};