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

Wulper Studio Library Components CMS

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MenuResponsive = void 0;
var _react = _interopRequireDefault(require("react"));
var _uuid = require("uuid");
var _react2 = require("@iconify/react");
var _material = require("@mui/material");
var _styled = require("./styled");
var _icons = require("../../helpers/icons");
var _IconButtonComponent = require("../../components/IconButtonComponent");
var _jsxRuntime = require("react/jsx-runtime");
/* eslint-disable no-unused-expressions */

var MenuResponsive = exports.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 = (0, _material.useTheme)();
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButtonComponent.IconButtonComponent, {
      iconProps: {
        onClick: function onClick() {
          return handleMenuOpen && handleMenuOpen();
        },
        sx: {
          backgroundColor: 'transparent'
        }
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, Object.assign({
        icon: _icons.ICONS_NAME.menuHamburger,
        color: theme.palette.text.primary
      }, iconProps))
    }), openMenu && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Drawer, Object.assign({
      anchor: "left",
      open: openMenu,
      onClose: handleMenuOpen
    }, drawerProps, {
      children: isChildren ? children : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Stack, {
          direction: "row",
          justifyContent: "flex-end",
          alignItems: "center",
          sx: {
            minHeight: 60,
            px: '0.5rem'
          },
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButtonComponent.IconButtonComponent, {
            iconProps: {
              sx: {
                backgroundColor: 'transparent'
              }
            },
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
              icon: _icons.ICONS_NAME.close,
              color: theme.palette.text.primary,
              onClick: handleMenuOpen
            })
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.ListContainer, {
          children: options && options.map(function (op) {
            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
              selected: op.active,
              onClick: function onClick() {
                handleMenuOpen && handleMenuOpen();
                op.toRoute && op.toRoute();
              },
              sx: {
                width: '100%'
              },
              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
                children: op.icon
              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
                primary: op.text
              })]
            }, (0, _uuid.v4)());
          })
        })]
      })
    }))]
  });
};