debug scroll of sidebar

src/components/layouts/dashboard/headerWithSidebar/index.jsx

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

src/core/components/SidebarMenu.jsx

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