@makeen.io/material-ui-kit/distr/molecules/Drawer/Drawer.js

Makeen UI components kit. Based on material-ui.

import _extends from "@babel/runtime/helpers/extends";import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject6() {var data = _taggedTemplateLiteral(["\n  & > .drawer-list-item {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    background: ", ";\n\n    ", "\n\n    .menu-option {\n      font-size: 13px;\n    }\n\n    .submenu-prefix {\n      margin-right: 20px;\n      font-size: 13px;\n    }\n\n    .MuiListItemIcon-root {\n      margin-left: 4px;\n    }\n\n    .MuiListItemText-root {\n      margin-top: 0;\n      margin-bottom: 0;\n      display: flex;\n      align-items: center;\n\n      .MuiTypography-root {\n        font-size: 13px;\n        line-height: 2.5;\n        ", "\n      }\n    }\n\n    ", " {\n      padding-left: 16px;\n    }\n  }\n"]);_templateObject6 = function _templateObject6() {return data;};return data;}function _templateObject5() {var data = _taggedTemplateLiteral(["\n  font-size: 12px;\n  text-transform: uppercase;\n  margin-top: 15px;\n  color: #8f9bb3;\n  padding: 0 20px;\n"]);_templateObject5 = function _templateObject5() {return data;};return data;}function _templateObject4() {var data = _taggedTemplateLiteral(["\n  color: ", ";\n  ", "\n"]);_templateObject4 = function _templateObject4() {return data;};return data;}function _templateObject3() {var data = _taggedTemplateLiteral(["\n  display: flex;\n  height: 64px;\n  align-items: center;\n  background-color: #192435;\n  margin-bottom: 22px;\n  padding: 0 12px;\n\n  .title {\n    color: ", ";\n    font-size: ", ";\n    padding: 0 10px;\n  }\n\n  .MuiButtonBase-root {\n    margin-left: auto;\n    .MuiIconButton-label {\n      color: ", ";\n      .MuiSvgIcon-root {\n        width: 1.5em;\n        height: 1.5em;\n      }\n    }\n  }\n"]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = _taggedTemplateLiteral(["\n  padding: 20px 0;\n  img {\n    height: 15px;\n    margin-top: 10px;\n  }\n"]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = _taggedTemplateLiteral(["\n  flex-shrink: 0;\n  white-space: nowrap;\n\n  .MuiPaper-root.MuiDrawer-paper {\n    background: ", ";\n    width: ", "px;\n    overflow-x: hidden;\n    transition: width 0.2s;\n  }\n"]);_templateObject = function _templateObject() {return data;};return data;}import React from "react";
import { IconButton, List, ListItem, ListItemIcon, ListItemText, Drawer as MuiDrawer } from "@material-ui/core";
import CollapseIcon from "../../../assets/icons/collapse-sidemenu.svg";
import CollapseRightIcon from "../../../assets/icons/menu-collapse-right.svg";
import _ from "lodash";
import { FaChevronDown, FaChevronRight } from "react-icons/fa";
import styled from "styled-components";
import icons from "./icons";
var drawerMenuType = {
  MAIN: "main",
  SUB: "submenu"
};
export default (function (_ref) {var theme = _ref.theme,drawer = _ref.drawer,open = _ref.open,groups = _ref.groups,_ref$variant = _ref.variant,variant = _ref$variant === void 0 ? "permanent" : _ref$variant,_onClickMenuItem = _ref.onClickMenuItem,setOpen = _ref.setOpen,logo = _ref.logo,title = _ref.title,_ref$collapsable = _ref.collapsable,collapsable = _ref$collapsable === void 0 ? false : _ref$collapsable;return /*#__PURE__*/React.createElement(Drawer, { open: open, drawer: drawer, variant: variant, theme: theme }, /*#__PURE__*/
  React.createElement(Drawer.top, { open: open, setOpen: setOpen, logo: logo, title: title, collapsable: collapsable }),
  _.map(groups, function (list, index) {return list.visible && /*#__PURE__*/React.createElement(Drawer.list, { type: drawerMenuType.MAIN, list: list, theme: theme, onClickMenuItem: function onClickMenuItem(v) {return _onClickMenuItem(v, list);}, key: String(index) });}));});
var Drawer = styled(MuiDrawer)(_templateObject(),




function (props) {return props.theme.palette.secondary.main;},
function (props) {return props.open ? props.drawer.open : props.drawer.closed;});




var DrawerLogoWrapper = styled.div(_templateObject2());






Drawer.logo = function (props) {return /*#__PURE__*/React.createElement(DrawerLogoWrapper, _extends({}, props), props.logo ? /*#__PURE__*/React.createElement(props.logo, null) : null);};
var DrawerTopWrapper = styled.div(_templateObject3(),








function (props) {return props.theme.palette.drawer.titleColor;},
function (props) {return props.theme.palette.drawer.titleFontSize;},






function (props) {return props.theme.palette.tertiary.contrastText;});







Drawer.top = function (_ref2) {var open = _ref2.open,setOpen = _ref2.setOpen,title = _ref2.title,logo = _ref2.logo,collapsable = _ref2.collapsable;return /*#__PURE__*/React.createElement(DrawerTopWrapper, null,
  open && /*#__PURE__*/React.createElement(Drawer.logo, { logo: logo }),
  open && title && /*#__PURE__*/React.createElement("span", { className: "title" }, title),
  collapsable && /*#__PURE__*/React.createElement(IconButton, { onClick: function onClick() {return setOpen(!open);} }, !open ? /*#__PURE__*/React.createElement(CollapseIcon, null) : /*#__PURE__*/React.createElement(CollapseRightIcon, null)));};
var DrawerListWrapper = styled(List)(_templateObject4(),
function (props) {return props.theme.palette.tertiary.contrastText;},
function (props) {return props.type === drawerMenuType.SUB ? "\n      padding-top: 0;\n      padding-bottom: 0;\n      " :




  "";});

Drawer.list = function (_ref3) {var type = _ref3.type,theme = _ref3.theme,list = _ref3.list,onClickMenuItem = _ref3.onClickMenuItem;return /*#__PURE__*/React.createElement(React.Fragment, null,
  list.title && /*#__PURE__*/React.createElement(Drawer.subtitle, null, list.title), /*#__PURE__*/
  React.createElement(DrawerListWrapper, { type: type, theme: theme }, list.options.map(function (item) {return item.visible && /*#__PURE__*/React.createElement(Drawer.listitem, _extends({ key: item.name, menuType: type, onClickMenuItem: onClickMenuItem }, item));})));};
Drawer.subtitle = styled.div(_templateObject5());






var DrawerListItemWrapper = styled.div(_templateObject6(),




function (props) {return props.active && props.theme.palette.drawer.foreground;},

function (props) {return props.menuType === drawerMenuType.SUB && "\n      padding-top: 4px;\n      padding-left: 50px;\n      padding-bottom: 4px;\n    ";},




























function (props) {return props.active && "color: #fff;";},



function (props) {return props.theme.breakpoints.down("sm");});




Drawer.listitem = function (props) {var _props$menuType =
    props.menuType,menuType = _props$menuType === void 0 ? drawerMenuType.MAIN : _props$menuType,onClickMenuItem = props.onClickMenuItem,options = props.options,collapsed = props.collapsed,theme = props.theme,name = props.name,active = props.active,label = props.label;
  var IconComponent = icons[name] && (active ? icons[name].active : icons[name].default);
  return /*#__PURE__*/React.createElement(DrawerListItemWrapper, { menuType: menuType, active: active }, /*#__PURE__*/
  React.createElement(ListItem, { classes: { root: "drawer-list-item" }, onClick: function onClick() {return onClickMenuItem(props);} },
  IconComponent && /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/
  React.createElement(IconComponent, null)),
  menuType === drawerMenuType.SUB && /*#__PURE__*/React.createElement("span", { className: "submenu-prefix" }, "-"), /*#__PURE__*/
  React.createElement(ListItemText, { primary: /*#__PURE__*/React.createElement("span", null, label) }),
  options && /*#__PURE__*/React.createElement("span", { className: "menu-option" }, collapsed ? /*#__PURE__*/React.createElement(FaChevronRight, null) : /*#__PURE__*/React.createElement(FaChevronDown, null))),
  options && !collapsed && /*#__PURE__*/React.createElement(Drawer.list, { theme: theme, type: drawerMenuType.SUB, list: { options: options }, onClickMenuItem: onClickMenuItem }));
};
//# sourceMappingURL=Drawer.js.map