djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix menu mobile

Browse source
This commit is contained in:
Krzysztof Bialoglowicz 2019-11-04 20:44:17 +01:00 committed by dominik-zeglen
parent ac8dabf34d
commit f2caca15fe
3 changed files with 11 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/AppLayout/MenuNested.tsx
View file

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

8
src/components/AppLayout/ResponsiveDrawer.tsx
View file

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

1
src/components/AppLayout/consts.ts
View file

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