Fix menu mobile

src/components/AppLayout/MenuNested.tsx

@@ -8,7 +8,7 @@ import SVG from "react-inlinesvg";
 import menuArrowIcon from "@assets/images/menu-arrow-icon.svg";
 import useTheme from "@saleor/hooks/useTheme";
 import { createHref } from "@saleor/misc";
-import { drawerWidthExpanded } from "./consts";
+import { drawerWidthExpanded, drawerWidthExpandedMobile } from "./consts";
 import { IActiveSubMenu } from "./MenuList";
 import { IMenuItem } from "./menuStructure";
 
@@ -26,9 +26,9 @@ const useStyles = makeStyles(theme => ({
   menuListNestedClose: {
     "& svg": {
       fill: theme.palette.primary.main,
-      left: 7,
+      left: 11,
       position: "relative",
-      top: -2
+      top: 1
     },
     border: `solid 1px #EAEAEA`,
     borderRadius: "100%",
@@ -71,7 +71,7 @@ const useStyles = makeStyles(theme => ({
   menuListNestedOpen: {
     [theme.breakpoints.down("sm")]: {
       right: 0,
-      width: drawerWidthExpanded,
+      width: drawerWidthExpandedMobile,
       zIndex: 2
     },
     right: -300,

src/components/AppLayout/ResponsiveDrawer.tsx

@@ -2,7 +2,11 @@ import Drawer from "@material-ui/core/Drawer";
 import Hidden from "@material-ui/core/Hidden";
 import { makeStyles } from "@material-ui/core/styles";
 import React from "react";
-import { drawerWidth, drawerWidthExpanded } from "./consts";
+import {
+  drawerWidth,
+  drawerWidthExpanded,
+  drawerWidthExpandedMobile
+} from "./consts";
 
 const useStyles = makeStyles(
   theme => ({
@@ -22,7 +26,7 @@ const useStyles = makeStyles(
       width: drawerWidth
     },
     drawerMobile: {
-      width: drawerWidthExpanded
+      width: drawerWidthExpandedMobile
     }
   }),
   { name: "ResponsiveDrawer" }

src/components/AppLayout/consts.ts

@@ -1,4 +1,5 @@
 export const drawerWidthExpanded = 210;
+export const drawerWidthExpandedMobile = 250;
 export const drawerWidth = 80;
 export const navigationBarHeight = 64;
 export const appLoaderHeight = 4;