From f9753b2312476e32d94511162f5942118ed69126 Mon Sep 17 00:00:00 2001 From: Pranav Kakaraparti Date: Sun, 25 Aug 2024 19:00:32 -0400 Subject: [PATCH] fix: sidebar closed width --- src/components/layout/Menu/MenuStyled.js | 40 ++++++++++++------------ 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/src/components/layout/Menu/MenuStyled.js b/src/components/layout/Menu/MenuStyled.js index 3b776dd..76cdd08 100644 --- a/src/components/layout/Menu/MenuStyled.js +++ b/src/components/layout/Menu/MenuStyled.js @@ -1,59 +1,59 @@ -import MuiDrawer from "@mui/material/Drawer"; -import { styled } from "@mui/system"; +import MuiDrawer from '@mui/material/Drawer'; +import { styled } from '@mui/system'; const drawerWidth = 240; const mobileDrawerWidth = 140; const openedMixin = (theme) => ({ width: mobileDrawerWidth, - [theme.breakpoints.up("sm")]: { + [theme.breakpoints.up('sm')]: { width: drawerWidth, }, - transition: theme.transitions.create("width", { + transition: theme.transitions.create('width', { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.enteringScreen, }), - overflowX: "hidden", + overflowX: 'hidden', }); const closedMixin = (theme) => ({ - transition: theme.transitions.create("width", { + transition: theme.transitions.create('width', { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen, }), - overflowX: "hidden", - width: `calc(${theme.spacing(8)} + 1px)`, - [theme.breakpoints.up("sm")]: { - width: `calc(${theme.spacing(8)} + 1px)`, + overflowX: 'hidden', + width: `calc(${theme.spacing(12)} + 1px)`, + [theme.breakpoints.up('sm')]: { + width: `calc(${theme.spacing(12)} + 1px)`, }, }); -const DrawerHeaderStyled = styled("div")(({ theme }) => ({ - display: "flex", - alignItems: "center", - justifyContent: "flex-end", +const DrawerHeaderStyled = styled('div')(({ theme }) => ({ + display: 'flex', + alignItems: 'center', + justifyContent: 'flex-end', padding: theme.spacing(0, 1), // necessary for content to be below app bar ...theme.mixins.toolbar, })); const DrawerStyled = styled(MuiDrawer, { - shouldForwardProp: (prop) => prop !== "open", + shouldForwardProp: (prop) => prop !== 'open', })(({ theme, open }) => ({ width: mobileDrawerWidth, - [theme.breakpoints.up("sm")]: { + [theme.breakpoints.up('sm')]: { width: drawerWidth, }, flexShrink: 0, - whiteSpace: "nowrap", - boxSizing: "border-box", + whiteSpace: 'nowrap', + boxSizing: 'border-box', ...(open && { ...openedMixin(theme), - "& .MuiDrawer-paper": openedMixin(theme), + '& .MuiDrawer-paper': openedMixin(theme), }), ...(!open && { ...closedMixin(theme), - "& .MuiDrawer-paper": closedMixin(theme), + '& .MuiDrawer-paper': closedMixin(theme), }), }));