RMS/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

debug scroll of sidebar

Browse Source
This commit is contained in:
Mohammad Jalali
2024-07-13 16:48:40 +03:30
parent e866318d2a
commit be19d4c2b5
2 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/layouts/dashboard/headerWithSidebar/index.jsx
View File

@@ -2,7 +2,7 @@
import SidebarMenu from "@/core/components/SidebarMenu"; import SidebarMenu from "@/core/components/SidebarMenu";
import ChevronRightIcon from "@mui/icons-material/ChevronRight"; import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import MenuIcon from "@mui/icons-material/Menu"; import MenuIcon from "@mui/icons-material/Menu";
import { Box, Drawer, IconButton, Paper, Stack, styled, Toolbar } from "@mui/material"; import { Box, Drawer, IconButton, Stack, styled, Toolbar } from "@mui/material";
import MuiAppBar from "@mui/material/AppBar"; import MuiAppBar from "@mui/material/AppBar";
import { useState } from "react"; import { useState } from "react";
import HeaderMenu from "./HeaderMenu"; import HeaderMenu from "./HeaderMenu";
@@ -11,7 +11,7 @@ const drawerWidth = 300;
const Main = styled(Stack, { shouldForwardProp: (prop) => prop !== "open" })(({ theme, open }) => ({ const Main = styled(Stack, { shouldForwardProp: (prop) => prop !== "open" })(({ theme, open }) => ({
flexGrow: 1, flexGrow: 1,
height: '100%', height: "100%",
transition: theme.transitions.create("margin", { transition: theme.transitions.create("margin", {
easing: theme.transitions.easing.sharp, easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen, duration: theme.transitions.duration.leavingScreen,
@@ -48,7 +48,7 @@ const DrawerHeader = styled("div")(({ theme }) => ({
alignItems: "center", alignItems: "center",
padding: theme.spacing(0, 1), padding: theme.spacing(0, 1),
...theme.mixins.toolbar, ...theme.mixins.toolbar,
minHeight: '48px !important', minHeight: "48px !important",
justifyContent: "flex-end", justifyContent: "flex-end",
})); }));
@@ -62,7 +62,7 @@ const HeaderWithSidebar = ({ children }) => {
setOpen(false); setOpen(false);
}; };
return ( return (
<Box sx={{ display: "flex", height: 'calc(100% - 163px)', width: '100%', mt: '163px' }}> <Box sx={{ display: "flex", height: "calc(100% - 163px)", width: "100%", mt: "163px" }}>
<AppBar sx={{ position: "fixed", top: "unset" }} elevation={0} open={open}> <AppBar sx={{ position: "fixed", top: "unset" }} elevation={0} open={open}>
<Toolbar variant="dense"> <Toolbar variant="dense">
<IconButton <IconButton
@@ -81,10 +81,12 @@ const HeaderWithSidebar = ({ children }) => {
</AppBar> </AppBar>
<Drawer <Drawer
sx={{ sx={{
height: '100%', height: "100%",
width: drawerWidth, width: drawerWidth,
flexShrink: 0, flexShrink: 0,
"& .MuiDrawer-paper": { "& .MuiDrawer-paper": {
height: "-webkit-fill-available",
overflow: "hidden",
width: drawerWidth, width: drawerWidth,
boxSizing: "border-box", boxSizing: "border-box",
borderTop: 1, borderTop: 1,
@@ -103,9 +105,9 @@ const HeaderWithSidebar = ({ children }) => {
</DrawerHeader> </DrawerHeader>
<SidebarMenu /> <SidebarMenu />
</Drawer> </Drawer>
<Main open={open} sx={{ height: '100%', width: '100%', overflow: 'hidden' }}> <Main open={open} sx={{ height: "100%", width: "100%", overflow: "hidden" }}>
<DrawerHeader /> <DrawerHeader />
<Box sx={{ height: '100%', width: '100%', overflowY: 'auto', p: 2, overflowX: 'hidden', }}> <Box sx={{ height: "100%", width: "100%", overflowY: "auto", p: 2, overflowX: "hidden" }}>
{children} {children}
</Box> </Box>
</Main> </Main>

2
src/core/components/SidebarMenu.jsx
View File

@@ -113,7 +113,7 @@ const SidebarMenu = () => {
return ( return (
userPermissions && ( userPermissions && (
<List disablePadding dense> <List sx={{ overflow: "auto" }} disablePadding dense>
{menuItems.map((menuItem) => { {menuItems.map((menuItem) => {
return <SidebarListItems dispatch={dispatch} key={menuItem.id} menuItem={menuItem} />; return <SidebarListItems dispatch={dispatch} key={menuItem.id} menuItem={menuItem} />;
})} })}