Fix menu hiding

src/components/AppLayout/AppLayout.tsx

@@ -85,67 +85,6 @@ const useStyles = makeStyles(
       height: "100vh",
       padding: "25px 20px"
     },
-    menuIcon: {
-      "& span": {
-        "&:nth-child(1)": {
-          top: 15
-        },
-        "&:nth-child(2), &:nth-child(3)": {
-          top: 20
-        },
-        "&:nth-child(4)": {
-          top: 25
-        },
-        background: theme.palette.secondary.light,
-        display: "block",
-        height: 1,
-        left: "20%",
-        opacity: 1,
-        position: "absolute",
-        transform: "rotate(0deg)",
-        transition: ".25s ease-in-out",
-        width: "60%"
-      },
-      [theme.breakpoints.up("md")]: {
-        display: "none"
-      },
-      [theme.breakpoints.down("sm")]: {
-        left: 0
-      },
-      background: theme.palette.background.paper,
-      borderRadius: "50%",
-      cursor: "pointer",
-      height: 42,
-      left: theme.spacing(),
-      marginRight: theme.spacing(2),
-      position: "relative",
-      transform: "rotate(0deg)",
-      transition: `${theme.transitions.duration.shorter}ms ease-in-out`,
-      width: 42
-    },
-    menuIconDark: {
-      "& span": {
-        background: theme.palette.common.white
-      }
-    },
-    menuIconOpen: {
-      "& span": {
-        "&:nth-child(1), &:nth-child(4)": {
-          left: "50%",
-          top: 20,
-          width: 0
-        },
-        "&:nth-child(2)": {
-          transform: "rotate(45deg)"
-        },
-        "&:nth-child(3)": {
-          transform: "rotate(-45deg)"
-        }
-      },
-      left: 280,
-      position: "absolute",
-      zIndex: 1999
-    },
     menuSmall: {
       background: theme.palette.background.paper,
       height: "100vh",
@@ -212,7 +151,6 @@ interface AppLayoutProps {
 const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
   const classes = useStyles({});
   const { isDark, toggleTheme } = useTheme();
-  const [isDrawerOpened, setDrawerState] = React.useState(false);
   const [isMenuOpened, setMenuState] = React.useState(false);
   const appActionAnchor = React.useRef<HTMLDivElement>();
   const appHeaderAnchor = React.useRef<HTMLDivElement>();
@@ -247,13 +185,6 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
     navigate(staffMemberDetailsUrl(user.id));
   };
 
-  const handleMenuItemClick = (url: string, event: React.MouseEvent<any>) => {
-    event.stopPropagation();
-    event.preventDefault();
-    setDrawerState(false);
-    navigate(url);
-  };
-
   const handleErrorBack = () => {
     navigate("/");
     dispatchAppState({
@@ -278,7 +209,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
               location={location.pathname}
               user={user}
               renderConfigure={renderConfigure}
-              onMenuItemClick={handleMenuItemClick}
+              onMenuItemClick={navigate}
             />
             <div className={classes.content}>
               {appState.loading ? (
@@ -290,18 +221,6 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
                 <div>
                   <Container>
                     <div className={classes.header}>
-                      <div
-                        className={classNames(classes.menuIcon, {
-                          [classes.menuIconOpen]: isDrawerOpened,
-                          [classes.menuIconDark]: isDark
-                        })}
-                        onClick={() => setDrawerState(!isDrawerOpened)}
-                      >
-                        <span />
-                        <span />
-                        <span />
-                        <span />
-                      </div>
                       <div ref={appHeaderAnchor} />
                       <div className={classes.spacer} />
                       <div className={classes.userBar}>

src/components/SideBar/MenuItem.tsx

@@ -4,6 +4,7 @@ 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 { UseNavigatorResult } from "@saleor/hooks/useNavigator";
 import classNames from "classnames";
 import React from "react";
 import SVG from "react-inlinesvg";
@@ -14,7 +15,7 @@ export interface MenuItemProps {
   active: boolean;
   isMenuShrunk: boolean;
   menuItem: IMenuItem;
-  onClick: (url: string, event: React.MouseEvent) => void;
+  onClick: UseNavigatorResult;
 }
 
 export const menuWidth = 210;
@@ -51,6 +52,7 @@ const useStyles = makeStyles(
       background: "none",
       border: "none",
       color: "inherit",
+      cursor: "pointer",
       display: "inline-flex",
       margin: 0,
       padding: 0
@@ -126,10 +128,11 @@ const MenuItem: React.FC<MenuItemProps> = ({
   const anchor = React.useRef<HTMLDivElement>(null);
 
   const handleClick = (event: React.MouseEvent, menuItem: IMenuItem) => {
+    event.stopPropagation();
     if (menuItem.children) {
       setOpen(true);
     } else {
-      onClick(menuItem.url, event);
+      onClick(menuItem.url);
       setOpen(false);
     }
   };
@@ -174,10 +177,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
                   component="button"
                   className={classNames(classes.label, classes.subMenuLabel)}
                   key={subMenuItem.url}
-                  onClick={event => {
+                  onClick={event => handleClick(event, subMenuItem)}
-                    event.preventDefault();
-                    handleClick(event, subMenuItem);
-                  }}
                   data-test="submenu-item-label"
                   data-test-id={subMenuItem.testingContextId}
                   variant="body2"

src/components/SideBar/SideBar.tsx

@@ -4,6 +4,7 @@ import makeStyles from "@material-ui/core/styles/makeStyles";
 import { configurationMenuUrl } from "@saleor/configuration";
 import { User } from "@saleor/fragments/types/User";
 import useLocalStorage from "@saleor/hooks/useLocalStorage";
+import { UseNavigatorResult } from "@saleor/hooks/useNavigator";
 import { sectionNames } from "@saleor/intl";
 import classNames from "classnames";
 import React from "react";
@@ -46,7 +47,7 @@ export interface SideBarProps {
   location: string;
   user: User;
   renderConfigure: boolean;
-  onMenuItemClick: (url: string, event: React.MouseEvent) => void;
+  onMenuItemClick: UseNavigatorResult;
 }
 
 export interface IActiveSubMenu {