Currently, I am utilizing the Material-ui Drawer component to toggle the display of content on the right side of the screen. The functionality I am aiming for is that when the Drawer opens, it will shrink the existing content on the right without any overlap. At the moment, I have set the width of the drawer using a variable and this setup is functioning properly. However, I now need to dynamically update the width of the drawer based on the width value of its child components.
Below is the code snippet featuring the Drawer component:
import { useState } from "react";
// Importing Material UI components
import { Box, Button, Drawer, Divider, Grid, IconButton } from "@mui/material";
// Additional Components
import DashboardHeader from "./DashboardHeader/DashboardHeader";
import LeadershipProfile from "./LeadershipProfile/LeadershipProfile";
import YourProfile from "./YourProfile/YourProfile";
import CustomIcon from "components/CustomIcon";
import icons from "enums/icons";
import { Theme } from "@mui/material/styles";
import makeStyles from "@mui/styles/makeStyles";
import createStyles from "@mui/styles/createStyles";
const useStyles = makeStyles((theme: Theme) =>
createStyles({
leftSideContainer: {
display: "contents",
overflow: "auto",
textAlign: "center",
},
drawer: {
top: theme.spacing(9),
"& .MuiDrawer-paper": {
// width: "30%",
marginTop: "72px",
position: "absolute",
},
},
drawerButton: {
color: theme.palette.button.active.from,
height: "14px",
},
// divider: {
// "& .MuiDivider-root": {
// right: 0,
// },
// },
})
);
const PaceLabsDashboard = () => {
const classes = useStyles();
const [isDrawerOpen, setIsDrawerOpen] = useState(true);
const drawerContentWidth = 400;
return (
<Box>
{/* Header */}
<Box sx={{ border: "2px solid black", width: "100%", height: "72px", textAlign: "center" }}>
<DashboardHeader />
</Box>
<Box sx={{ display: "flex" }}>
{/* Right content */}
<Box className={classes.leftSideContainer}>
<LeadershipProfile />
<IconButton size="small" aria-label="toggle-drawer" onClick={() => setIsDrawerOpen(!isDrawerOpen)}>
<CustomIcon
className={classes.drawerButton}
icon={isDrawerOpen ? icons.chevronRightThin : icons.chevronLeftThin}
/>
</IconButton>
</Box>
{/* Left content */}
<Drawer
anchor="right"
variant="persistent"
open={isDrawerOpen}
className={classes.drawer}
sx={{
...(isDrawerOpen ? { display: "flex" } : { display: { xs: "block", sm: "none" } }),
}}
>
<Box>
<YourProfile />
</Box>
</Drawer>
</Box>
</Box>
);
};
export default PaceLabsDashboard;