@makeen.io/material-ui-kit/distr/molecules/Drawer/TestDrawer.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 HomeActiveIcon from "../../../assets/icons/home-active.svg";
import HomeIcon from "../../../assets/icons/home.svg";
import CollapseRightIcon from "../../../assets/icons/menu-collapse-right.svg";
import PlanActiveIcon from "../../../assets/icons/plan-active.svg";
import PlanIcon from "../../../assets/icons/plan.svg";
import SettingActiveIcon from "../../../assets/icons/setting-active.svg";
import SettingIcon from "../../../assets/icons/setting.svg";
import TeamActiveIcon from "../../../assets/icons/team-active.svg";
import TeamIcon from "../../../assets/icons/team.svg";
import logoWhite from "../../../assets/images/logo-white.png";
import styled from "styled-components";
var icons = {
  home: { active: /*#__PURE__*/React.createElement(HomeActiveIcon, null), default: /*#__PURE__*/React.createElement(HomeIcon, null) },
  plan: { active: /*#__PURE__*/React.createElement(PlanActiveIcon, null), default: /*#__PURE__*/React.createElement(PlanIcon, null) },
  setting: { active: /*#__PURE__*/React.createElement(SettingActiveIcon, null), default: /*#__PURE__*/React.createElement(SettingIcon, null) },
  team: { active: /*#__PURE__*/React.createElement(TeamActiveIcon, null), default: /*#__PURE__*/React.createElement(TeamIcon, null) }
};
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 DrawerTop = function DrawerTop(_ref) {var open = _ref.open,setOpen = _ref.setOpen;return /*#__PURE__*/React.createElement(DrawerTopWrapper, null,
  open && /*#__PURE__*/React.createElement(DrawerLogo, null), /*#__PURE__*/
  React.createElement(IconButton, { onClick: function onClick() {return setOpen && setOpen(!open);} }, !open ? /*#__PURE__*/React.createElement(CollapseIcon, null) : /*#__PURE__*/React.createElement(CollapseRightIcon, null)));};
var DrawerListItem = styled(function (_ref2) {var name = _ref2.name,icns = _ref2.icons,props = _objectWithoutProperties(_ref2, ["name", "icons"]);return /*#__PURE__*/React.createElement(DrawerListItemWrapper, _extends({}, props), /*#__PURE__*/
  React.createElement(ListItem, { classes: { root: "drawer-list-item" } }, /*#__PURE__*/
  React.createElement(ListItemIcon, null, props.active ? icns.active : icns.default), /*#__PURE__*/
  React.createElement(ListItemText, { primary: /*#__PURE__*/React.createElement("span", null, props.label) })));})(_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 (_ref3) {var theme = _ref3.theme,drawer = _ref3.drawer,open = _ref3.open,onClickMenuItem = _ref3.onClickMenuItem,props = _objectWithoutProperties(_ref3, ["theme", "drawer", "open", "onClickMenuItem"]);return /*#__PURE__*/React.createElement(DrawerWrapper, { drawer: drawer, open: open, variant: "permanent", theme: theme }, /*#__PURE__*/
  React.createElement(DrawerTop, null), /*#__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))),
  props.groups.map(function (list, index) {return /*#__PURE__*/React.createElement(DrawerList, { theme: props.theme, key: String(index) }, list.options.map(function (item) {return /*#__PURE__*/React.createElement(DrawerListItem, _extends({ icon: icons[item.name], onClick: function onClick() {return onClickMenuItem(item);}, key: item.name }, item));}));}));});
//# sourceMappingURL=TestDrawer.js.map