diff --git a/src/components/AppLayout/MenuNested.tsx b/src/components/AppLayout/MenuNested.tsx index 4b486f21d..85ed202bb 100644 --- a/src/components/AppLayout/MenuNested.tsx +++ b/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, diff --git a/src/components/AppLayout/ResponsiveDrawer.tsx b/src/components/AppLayout/ResponsiveDrawer.tsx index 6925a5076..86f1dbb83 100644 --- a/src/components/AppLayout/ResponsiveDrawer.tsx +++ b/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" } diff --git a/src/components/AppLayout/consts.ts b/src/components/AppLayout/consts.ts index 342ad7b55..a513c3112 100644 --- a/src/components/AppLayout/consts.ts +++ b/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;