Add styles to menu

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,

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<MenuItemProps> = ({ menuItem, onClick }) => {
+const MenuItem: React.FC<MenuItemProps> = ({
+  active,
+  menuItem,
+  isMenuShrunk,
+  onClick
+}) => {
   const classes = useStyles({});
   const [open, setOpen] = React.useState(false);
   const anchor = React.useRef<HTMLDivElement>(null);
@@ -43,8 +109,25 @@ const MenuItem: React.FC<MenuItemProps> = ({ menuItem, onClick }) => {
   };
 
   return (
-    <div ref={anchor} onClick={event => handleClick(event, menuItem)}>
+    <div
-      {menuItem.label}
+      className={classNames(classes.root, {
+        [classes.rootActive]: active,
+        [classes.rootExpanded]: !isMenuShrunk
+      })}
+      ref={anchor}
+      onClick={event => handleClick(event, menuItem)}
+    >
+      {menuItem.icon && <SVG className={classes.icon} src={menuItem.icon} />}
+      <Typography
+        className={classNames(classes.label, {
+          [classes.hideLabel]: isMenuShrunk
+        })}
+        variant="body2"
+        data-test="menu-item-label"
+        data-test-id={menuItem.testingContextId}
+      >
+        {menuItem.label}
+      </Typography>
       {menuItem.children && (
         <Popper
           className={classes.popper}
@@ -60,13 +143,16 @@ const MenuItem: React.FC<MenuItemProps> = ({ menuItem, onClick }) => {
           >
             <Paper elevation={6} className={classes.paper}>
               {menuItem.children.map(subMenuItem => (
-                <div
+                <Typography
+                  className={classNames(classes.label, classes.subMenuLabel)}
                   key={subMenuItem.url}
                   onClick={event => handleClick(event, subMenuItem)}
-                  data-test="select-option"
+                  data-test="submenu-item-label"
+                  data-test-id={subMenuItem.testingContextId}
+                  variant="body2"
                 >
                   {subMenuItem.label}
-                </div>
+                </Typography>
               ))}
             </Paper>
           </ClickAwayListener>

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 {
+import { configurationMenuUrl } from "@saleor/configuration";
-  configurationMenuUrl,
-  createConfigurationMenu
-} 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",
+      transition: "width 0.5s ease"
-      width: 210
-    },
-    shrunk: {
-      "&$root": {
-        width: 72
-      }
     }
   }),
   {
@@ -62,16 +53,12 @@ const SideBar: React.FC<SideBarProps> = ({
   const intl = useIntl();
 
   return (
-    <div
+    <div className={classes.root}>
-      className={classNames(classes.root, {
-        [classes.shrunk]: isShrunk
-      })}
-    >
       <div className={classes.logo}>
         <SVG src={logoLight} />
       </div>
       {menuItems.map(menuItem => {
-        // const isActive = isMenuActive(location, menuItem);
+        const isActive = isMenuActive(location, menuItem);
 
         if (
           menuItem.permission &&
@@ -82,13 +69,27 @@ const SideBar: React.FC<SideBarProps> = ({
           return null;
         }
 
-        return <MenuItem menuItem={menuItem} onClick={onMenuItemClick} />;
+        return (
+          <MenuItem
+            active={isActive}
+            isMenuShrunk={isShrunk}
+            menuItem={menuItem}
+            onClick={onMenuItemClick}
+          />
+        );
       })}
       {renderConfigure && (
         <MenuItem
+          active={
+            !menuItems.reduce(
+              (acc, menuItem) => acc || isMenuActive(location, menuItem),
+              false
+            )
+          }
+          isMenuShrunk={isShrunk}
           menuItem={{
             ariaLabel: "configure",
-            icon: null,
+            icon: configurationIcon,
             label: intl.formatMessage(sectionNames.configuration),
             testingContextId: "configure",
             url: configurationMenuUrl

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

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: {