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

Makeen UI components kit. Based on material-ui.

import _extends from "@babel/runtime/helpers/extends";import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject6() {var data = _taggedTemplateLiteral(["\n  padding: 20px 0;\n  img {\n    height: 20px;\n    margin-top: 10px;\n  }\n"]);_templateObject6 = function _templateObject6() {return data;};return data;}function _templateObject5() {var data = _taggedTemplateLiteral([""]);_templateObject5 = function _templateObject5() {return data;};return data;}function _templateObject4() {var data = _taggedTemplateLiteral(["\n  & .MuiListItem-root {\n    ", ";\n    display: flex;\n    align-items: center;\n    cursor: pointer;\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"]);_templateObject4 = function _templateObject4() {return data;};return data;}function _templateObject3() {var data = _taggedTemplateLiteral(["\n  color: ", ";\n"]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {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  .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"]);_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: hidden;\n    transition: width 0.2s;\n  }\n"]);_templateObject = function _templateObject() {return data;};return data;}import React from "react";
import { Drawer, IconButton, List, ListItem, ListItemIcon, ListItemText } from "@material-ui/core";
import CollapseIcon from "../../../assets/icons/collapse-sidemenu.svg";
import CollapseRightIcon from "../../../assets/icons/menu-collapse-right.svg";
import logoWhite from "../../../assets/images/logo-white.png";
import _ from "lodash";
import styled from "styled-components";
import icons from "./icons";
var DrawerWrapper = styled(Drawer)(_templateObject(),




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




var DrawerTopWrapper = styled.div(_templateObject2(),










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







var DrawerList = styled(List)(_templateObject3(),
function (props) {return props.theme.palette.tertiary.contrastText;});

var DrawerListItemWrapper = styled.div(_templateObject4(),

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

















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




var DrawerListItem = styled(function (_ref) {var name = _ref.name,icon = _ref.icon,onClickMenuItem = _ref.onClickMenuItem,options = _ref.options,index = _ref.index,props = _objectWithoutProperties(_ref, ["name", "icon", "onClickMenuItem", "options", "index"]);return /*#__PURE__*/React.createElement(DrawerListItemWrapper, _extends({}, props), /*#__PURE__*/
  React.createElement(ListItem, { classes: { root: "drawer-list-item" } }, /*#__PURE__*/
  React.createElement(ListItemIcon, null, props.active ? icon.active : icon.default), /*#__PURE__*/
  React.createElement(ListItemText, { primary: /*#__PURE__*/React.createElement("span", null, props.label) })),
  options && /*#__PURE__*/React.createElement(DrawerList, { theme: props.theme, key: String(index) }, options.map(function (item) {return /*#__PURE__*/React.createElement(DrawerListItem, _extends({ key: item.name, onClick: function onClick() {return onClickMenuItem(item);} }, item));})));})(_templateObject5());
var DrawerLogoWrapper = styled.div(_templateObject6());






var DrawerLogo = function DrawerLogo(props) {return /*#__PURE__*/React.createElement(DrawerLogoWrapper, _extends({}, props), /*#__PURE__*/
  React.createElement("img", { alt: "Amazon Northstar", src: logoWhite }));};
export default (function (_ref2) {var theme = _ref2.theme,drawer = _ref2.drawer,open = _ref2.open,groups = _ref2.groups,onClickMenuItem = _ref2.onClickMenuItem,onSelectMenu = _ref2.onSelectMenu,props = _objectWithoutProperties(_ref2, ["theme", "drawer", "open", "groups", "onClickMenuItem", "onSelectMenu"]);return /*#__PURE__*/React.createElement(DrawerWrapper, { open: open, drawer: drawer, variant: "permanent", theme: theme }, /*#__PURE__*/
  React.createElement(DrawerTopWrapper, null,
  open && /*#__PURE__*/React.createElement(DrawerLogo, null), /*#__PURE__*/
  React.createElement(IconButton, { onClick: function onClick() {return props.setOpen(!open);} }, !open ? /*#__PURE__*/React.createElement(CollapseIcon, null) : /*#__PURE__*/React.createElement(CollapseRightIcon, null))),
  _.map(groups, function (list, index) {return /*#__PURE__*/React.createElement(DrawerList, { theme: theme, key: String(index) }, list.options.map(function (item) {return /*#__PURE__*/React.createElement(DrawerListItem, _extends({ icon: icons[item.name], onClickMenuItem: onClickMenuItem, onClick: function onClick() {return onSelectMenu(item);}, key: item.name }, item));}));}));});
//# sourceMappingURL=NDrawer.js.map