@wulperstudio/cms/modern/organisms/Menu/Menu.js

Wulper Studio Library Components CMS

import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["customHeader", "DividerProps", "AvatarProps", "ItemProps"];
import React from 'react';
import { Stack, Avatar, Divider, useTheme } from '@mui/material';
import { Tooltip } from '../../components';
import { Div, CustomHeader, ListItem, ContainerIcon } from './styled';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var Menu = function Menu(_ref) {
  var customHeader = _ref.customHeader,
    _DividerProps = _ref.DividerProps,
    _AvatarProps = _ref.AvatarProps,
    _ItemProps = _ref.ItemProps,
    props = _objectWithoutProperties(_ref, _excluded);
  var theme = useTheme();
  return /*#__PURE__*/_jsx(CustomHeader, Object.assign({}, customHeader, {
    children: /*#__PURE__*/_jsx(Div, {
      children: /*#__PURE__*/_jsxs(Stack, {
        spacing: props.spacing || 10,
        sx: Object.assign({
          width: '100%',
          height: '100%',
          display: 'grid',
          gridTemplateRows: 'auto 1fr'
        }, !!props.footer && {
          gridTemplateRows: 'auto 1fr auto'
        }),
        children: [/*#__PURE__*/_jsx(Stack, {
          justifyContent: "center",
          alignItems: "center",
          sx: {
            height: '75px',
            marginTop: '5px'
          },
          children: /*#__PURE__*/_jsx(Avatar, Object.assign({
            alt: "Logo",
            src: props.logoUrl,
            sx: {
              width: 45,
              height: 45
            }
          }, _AvatarProps))
        }), /*#__PURE__*/_jsx("nav", {
          children: /*#__PURE__*/_jsx(Stack, {
            spacing: 0,
            alignItems: "center",
            justifyContent: "center",
            children: /*#__PURE__*/_jsxs(Stack, {
              spacing: props.spacingIcons,
              children: [props.icons.map(function (ico, index) {
                return /*#__PURE__*/_jsx("div", Object.assign({
                  id: "menu_vertical_item_".concat(ico.text)
                }, _ItemProps, {
                  style: Object.assign({
                    order: index + 1
                  }, _ItemProps == null ? void 0 : _ItemProps.style),
                  children: /*#__PURE__*/_jsx(Tooltip, {
                    title: ico.text,
                    placement: "right",
                    children: /*#__PURE__*/_jsx(ListItem, {
                      active: ico.active,
                      onClick: function onClick() {
                        var _ico$toRoute;
                        (_ico$toRoute = ico.toRoute) == null || _ico$toRoute.call(ico);
                      },
                      children: /*#__PURE__*/_jsx(ContainerIcon, {
                        children: ico.icon
                      })
                    })
                  })
                }), "".concat(ico.text));
              }), !props.hideDivider && /*#__PURE__*/_jsx("div", {
                style: {
                  order: props.order
                },
                children: /*#__PURE__*/_jsx(Divider, Object.assign({
                  variant: "fullWidth"
                }, _DividerProps, {
                  sx: Object.assign({
                    borderColor: theme.palette.text.secondary,
                    width: 'auto'
                  }, _DividerProps == null ? void 0 : _DividerProps.sx)
                }))
              })]
            })
          })
        }), props.footer]
      })
    })
  }));
};