When the sidebar is opened, I am facing issues with the main content scroll and certain fields such as select options and search bar not functioning properly. I have included the main content in the routes from which it is being loaded. However, the scroll and other functions mentioned work perfectly fine when the side-drawer is closed. As a newcomer to material ui + react, I have tried implementing various tips from different sources but have been stuck on this issue for quite some time.
<>
<Box sx={{ display: "flex" }}>
<AppBar
sx={{ backgroundColor: "rgb(19, 71, 129)" }}
position="fixed"
className={classes.appBar}
>
<Toolbar align="center">
<IconButton
color="inherit"
onClick={handleMenuClick}
edge="start"
className={clsx(classes.menuButton)}
>
<MenuIcon />
</IconButton>
</Toolbar>
</AppBar>
<Drawer
className={classes.drawer}
variant="temporary"
open={open}
transitionDuration={{
enter: transitionDuration,
exit: transitionDuration,
}}
classes={{
paper: classes.drawerPaper,
}}
>
<Toolbar>
<IconButton
sx={{ marginLeft: "auto" }}
onClick={handleMenuClick}
edge="start"
className={clsx(classes.menuButton)}
>
<ChevronLeftIcon />
</IconButton>
</Toolbar>
<div className={classes.drawerContainer}>
{/* //Drawer Items */}
<DrawerItems open={open} isAdmin={isAdmin} />
</div>
{/* Logout */}
<LightTooltip title="Logout" placement="top">
<IconButton
sx={{ marginTop: "auto" }}
onClick={handleLogout}
color="error"
>
<ExitToAppIcon />
</IconButton>
</LightTooltip>
</Drawer>
{/* Routes for drawer components */}
<main
className={clsx(classes.content, {
[classes.contentShift]: open,
})}
>
<Routes>
<Route path="dashboard" element={<Dashboard />} />
<Route path="employees" element={<Employees />} />
<Route path="payroll" element={<Payroll />} />
<Route path="projects" element={<Projects />} />
<Route path="leaves" element={<Leaves />} />
<Route path="leavesemp" element={<LeavesEMP />} />
<Route path="empattendance" element={<EMPAttendance />} />
<Route path="hrattendance" element={<HRAttendance />} />
</Routes>
</main>
</Box>
</>
This represents the style:
drawerContainer: {
overflow: "auto",
},
content: {
flexGrow: 1,
padding: theme.spacing(3),
transition: theme.transitions.create("margin", {
easing: theme.transitions.easing.sharp,
duration: transitionDuration,
}),
marginLeft: 0,
},
contentShift: {
transition: theme.transitions.create("margin", {
easing: theme.transitions.easing.easeOut,
duration: transitionDuration,
}),
marginLeft: drawerWidth,
},