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

Import React from 'react'; import { AppBar, Toolbar, Typography, Container, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Button, TextField, IconButton, Avatar, List, ListItem, ListItemIcon, ListItemText, Drawer, Box, } from '@mui/material'; import { Dashboard as DashboardIcon, People as UsersIcon, Event as AppointmentIcon, Photo as PhotoIcon, AccountTree as HierarchyIcon, Message as MessageIcon, Help as HelpIcon, Settings as SettingIcon, Search as SearchIcon, Add as AddIcon, MoreVert as MoreVertIcon, Edit as EditIcon, Delete as DeleteIcon, } from '@mui/icons react'; const drawerWidth = 240; const UserDashboard = () => { const users = [ { name: 'David Wagner', email: 'david.wagner@example.com', role: 'Super Admin', createDate: '24 DEC 2015' }, { name: 'Ina Megan', email: 'ina.megan@example.com', role: 'Admin', createDate: '24 DEC 2015' }, { name: 'Devin Harmon', email: 'devin.harmon@example.com', role: 'HR Admin', createDate: '18 DEC 2015' }, { name: 'Lena Page', email: 'lena.page@example.com', role: 'Employee', createDate: '8 DEC 2016' }, { name: 'Evie Norton', email: 'evie.norton@example.com', role: 'Super Admin', createDate: '15 JAN 2017' }, { name: 'Victoria Perez', email: 'victoria.perez@example.com', role: 'HR Admin', createDate: '12 JAN 2019' }, { name: 'Cora Medina', email: 'cora.medina@example.com', role: 'Employee', createDate: '21 JUN 2020' }, ]; return ( <Box sx={{ display: 'flex' }}> <AppBar position="fixed" sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}> <Toolbar> <Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}> YOURLOGO </Typography> <Typography variant="subtitle1" sx={{ mr: 2 }}> Hello, Lekan </Typography> <Avatar>LO</Avatar> </Toolbar> </AppBar> <Drawer variant="permanent" sx={{ width: drawerWidth, flexShrink: 0, [`& .MuiDrawer paper`]: { width: drawerWidth, boxSizing: 'border box' }, }} > <Toolbar /> <Box sx={{ overflow: 'auto' }}> <List> {[ { text: 'Dashboard', icon: <DashboardIcon /> }, { text: 'Users', icon: <UsersIcon /> }, { text: 'All Appointment', icon: <AppointmentIcon /> }, { text: 'Photos', icon: <PhotoIcon /> }, { text: 'Hierarchy', icon: <HierarchyIcon /> }, { text: 'Message', icon: <MessageIcon /> }, { text: 'Help', icon: <HelpIcon /> }, { text: 'Setting', icon: <SettingIcon /> }, ].map((item, index) => ( <ListItem button key={item.text}> <ListItemIcon>{item.icon}</ListItemIcon> <ListItemText primary={item.text} /> </ListItem> ))} </List> </Box> </Drawer> <Box component="main" sx={{ flexGrow: 1, p: 3 }}> <Toolbar /> <Typography variant="h4" sx={{ mb: 2 }}> Users Dashboard </Typography> <Paper sx={{ mb: 2, p: 2 }}> <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}> <TextField variant="outlined" size="small" placeholder="Search" sx={{ mr: 2, flexGrow: 1 }} InputProps={{ startAdornment: <SearchIcon />, }} /> <Button variant="contained" startIcon={<AddIcon />}> Add user </Button> </Box> <TableContainer> <Table> <TableHead> <TableRow> <TableCell>Name</TableCell> <TableCell>Create Date</TableCell> <TableCell>Role</TableCell> <TableCell>Action</TableCell> </TableRow> </TableHead> <TableBody> {users.map((user) => ( <TableRow key={user.name}> <TableCell> <Box sx={{ display: 'flex', alignItems: 'center' }}> <Avatar sx={{ mr: 2 }}>{user.name[0]}</Avatar> <Box> <Typography variant="subtitle2">{user.name}</Typography> <Typography variant="body2" color="text.secondary"> {user.email} </Typography> </Box> </Box> </TableCell> <TableCell>{user.createDate}</TableCell> <TableCell> <Button variant="contained" size="small" color={ user.role === 'Super Admin' ? 'primary' : user.role === 'Admin' ? 'secondary' : user.role === 'HR Admin' ? 'info' : 'default' } > {user.role} </Button> </TableCell> <TableCell> <IconButton size="small"> <EditIcon /> </IconButton> <IconButton size="small"> <DeleteIcon /> </IconButton> <IconButton size="small"> <MoreVertIcon /> </IconButton> </TableCell> </TableRow> ))} </TableBody> </Table> </TableContainer> </Paper> </Box> </Box> ); }; export default UserDashboard;