Drawer Width - Copy this React, Mui Component to your project

add and update overview: <Box sx={{ display: "flex", flexDirection: "row" }}> {/* Sidebar */} <StyledDrawer variant="permanent"> <Box sx={{ padding: 2 }}> <Typography variant="h6">Contact Manager</Typography> <List> {sidebarItems.map((item) => ( <ListItem button key={item.text}> <ListItemIcon>{item.icon}</ListItemIcon> <ListItemText primary={item.text} /> </ListItem> ))} </List> </Box> </StyledDrawer> {/* Main Content */} <Box component="main" sx={{ flexGrow: 1, p: 3 }}> <Grid container spacing={2}> {/* Total Contacts, Leads Overview, Opportunity Pipeline */} <Grid item xs={12} md={4}> <Card> <CardContent> <Typography variant="h6">Total Contacts</Typography> <Typography variant="h4">200</Typography> </CardContent> </Card> </Grid> <Grid item xs={12} md={4}> <Card> <CardContent> <Typography variant="h6">Leads Overview</Typography> <Typography variant="h4">50 Active</Typography> </CardContent> </Card> </Grid> <Grid item xs={12} md={4}> <Card> <CardContent> <Typography variant="h6">Opportunities</Typography> <Typography variant="h4">$500K</Typography> </CardContent> </Card> </Grid> {/* Upcoming Tasks, Recent Activities */} <Grid item xs={12} md={6}> <Card> <CardContent> <Typography variant="h6">Upcoming Tasks</Typography> <List> {/* Task Items */} </List> </CardContent> </Card> </Grid> <Grid item xs={12} md={6}> <Card> <CardContent> <Typography variant="h6">Recent Activities</Typography> <Timeline> {/* Timeline of recent actions */} </Timeline> </CardContent> </Card> </Grid> </Grid> </Box> </Box>