From c1c571359217d726fadf98276652a5760fa85d9e Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Mon, 7 Sep 2020 16:34:13 +0200 Subject: [PATCH] Add styles to menu --- src/components/AppLayout/AppLayout.tsx | 1 - src/components/SideBar/MenuItem.tsx | 100 +++++++++++++++++++++++-- src/components/SideBar/SideBar.tsx | 43 +++++------ src/components/SideBar/utils.ts | 7 ++ src/intl.ts | 2 +- 5 files changed, 123 insertions(+), 30 deletions(-) diff --git a/src/components/AppLayout/AppLayout.tsx b/src/components/AppLayout/AppLayout.tsx index 5dccbac04..bb41391f9 100644 --- a/src/components/AppLayout/AppLayout.tsx +++ b/src/components/AppLayout/AppLayout.tsx @@ -203,7 +203,6 @@ const useStyles = makeStyles( textAlign: "right" }, view: { - backgroundColor: theme.palette.background.default, flex: 1, flexGrow: 1, marginLeft: 0, diff --git a/src/components/SideBar/MenuItem.tsx b/src/components/SideBar/MenuItem.tsx index 4d1b7454b..73a1f9ccb 100644 --- a/src/components/SideBar/MenuItem.tsx +++ b/src/components/SideBar/MenuItem.tsx @@ -1,26 +1,87 @@ import ClickAwayListener from "@material-ui/core/ClickAwayListener"; import Paper from "@material-ui/core/Paper"; import Popper from "@material-ui/core/Popper"; -import { fade } from "@material-ui/core/styles/colorManipulator"; import makeStyles from "@material-ui/core/styles/makeStyles"; +import Typography from "@material-ui/core/Typography"; +import classNames from "classnames"; import React from "react"; +import SVG from "react-inlinesvg"; import { IMenuItem } from "../AppLayout/menuStructure"; export interface MenuItemProps { + active: boolean; + isMenuShrunk: boolean; menuItem: IMenuItem; onClick: (url: string, event: React.MouseEvent) => void; } const useStyles = makeStyles( theme => ({ + hideLabel: { + "&$label": { + opacity: 0 + } + }, + icon: { + "& svg": { + height: 24, + width: 24 + }, + marginRight: theme.spacing(1.5), + transition: theme.transitions.duration.shortest + "ms" + }, + label: { + cursor: "pointer", + fontSize: 16, + fontWeight: "bold", + opacity: 1, + transition: theme.transitions.duration.shortest + "ms" + }, paper: { borderRadius: 16, + cursor: "default", padding: theme.spacing(3) }, popper: { marginLeft: theme.spacing(3), zIndex: 2 + }, + root: { + "&:hover": { + color: theme.palette.primary.main + }, + borderBottomRightRadius: 100, + borderTopRightRadius: 100, + color: theme.palette.text.disabled, + cursor: "pointer", + display: "flex", + height: 56, + marginBottom: theme.spacing(), + overflow: "hidden", + padding: theme.spacing(2, 3), + transition: theme.transitions.duration.shortest + "ms", + width: 72 + }, + rootActive: { + "&$root": { + background: theme.palette.background.paper, + boxShadow: `9px 9px 20px 0 ${theme.palette.grey[300]}`, + color: theme.palette.primary.main + } + }, + rootExpanded: { + width: 210 + }, + subMenuLabel: { + "&$label": { + "&:not(:last-child)": { + marginBottom: theme.spacing(2) + } + }, + "&:hover": { + color: theme.palette.primary.main + } } }), { @@ -28,7 +89,12 @@ const useStyles = makeStyles( } ); -const MenuItem: React.FC = ({ menuItem, onClick }) => { +const MenuItem: React.FC = ({ + active, + menuItem, + isMenuShrunk, + onClick +}) => { const classes = useStyles({}); const [open, setOpen] = React.useState(false); const anchor = React.useRef(null); @@ -43,8 +109,25 @@ const MenuItem: React.FC = ({ menuItem, onClick }) => { }; return ( -
handleClick(event, menuItem)}> - {menuItem.label} +
handleClick(event, menuItem)} + > + {menuItem.icon && } + + {menuItem.label} + {menuItem.children && ( = ({ menuItem, onClick }) => { > {menuItem.children.map(subMenuItem => ( -
handleClick(event, subMenuItem)} - data-test="select-option" + data-test="submenu-item-label" + data-test-id={subMenuItem.testingContextId} + variant="body2" > {subMenuItem.label} -
+ ))} diff --git a/src/components/SideBar/SideBar.tsx b/src/components/SideBar/SideBar.tsx index 32019b202..b298b4a35 100644 --- a/src/components/SideBar/SideBar.tsx +++ b/src/components/SideBar/SideBar.tsx @@ -1,13 +1,10 @@ import logoLight from "@assets/images/logo-sidebar-light.svg"; +import configurationIcon from "@assets/images/menu-configure-icon.svg"; import makeStyles from "@material-ui/core/styles/makeStyles"; -import { - configurationMenuUrl, - createConfigurationMenu -} from "@saleor/configuration"; +import { configurationMenuUrl } from "@saleor/configuration"; import { User } from "@saleor/fragments/types/User"; import useLocalStorage from "@saleor/hooks/useLocalStorage"; import { sectionNames } from "@saleor/intl"; -import classNames from "classnames"; import React from "react"; import SVG from "react-inlinesvg"; import { useIntl } from "react-intl"; @@ -19,16 +16,10 @@ import { isMenuActive } from "./utils"; const useStyles = makeStyles( theme => ({ logo: { - margin: "36px 0 0 19px" + margin: `36px 0 ${theme.spacing(3)}px 19px` }, root: { - transition: "width 0.5s ease", - width: 210 - }, - shrunk: { - "&$root": { - width: 72 - } + transition: "width 0.5s ease" } }), { @@ -62,16 +53,12 @@ const SideBar: React.FC = ({ const intl = useIntl(); return ( -
+
{menuItems.map(menuItem => { - // const isActive = isMenuActive(location, menuItem); + const isActive = isMenuActive(location, menuItem); if ( menuItem.permission && @@ -82,13 +69,27 @@ const SideBar: React.FC = ({ return null; } - return ; + return ( + + ); })} {renderConfigure && ( acc || isMenuActive(location, menuItem), + false + ) + } + isMenuShrunk={isShrunk} menuItem={{ ariaLabel: "configure", - icon: null, + icon: configurationIcon, label: intl.formatMessage(sectionNames.configuration), testingContextId: "configure", url: configurationMenuUrl diff --git a/src/components/SideBar/utils.ts b/src/components/SideBar/utils.ts index bd894f877..5f9856778 100644 --- a/src/components/SideBar/utils.ts +++ b/src/components/SideBar/utils.ts @@ -4,6 +4,13 @@ import { matchPath } from "react-router"; import { IMenuItem } from "../AppLayout/menuStructure"; export function isMenuActive(location: string, menuItem: IMenuItem) { + if (menuItem.children) { + return menuItem.children.reduce( + (acc, subMenuItem) => acc || isMenuActive(location, subMenuItem), + false + ); + } + return location.split("?")[0] === orderDraftListUrl().split("?")[0] && menuItem.url.split("?")[0] === orderListUrl().split("?")[0] ? false diff --git a/src/intl.ts b/src/intl.ts index 1b8042ec8..fa27aa818 100644 --- a/src/intl.ts +++ b/src/intl.ts @@ -196,7 +196,7 @@ export const sectionNames = defineMessages({ description: "draft orders section name" }, home: { - defaultMessage: "Home", + defaultMessage: "Dashboard", description: "home section name" }, navigation: {