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: '[email protected]', role: 'Super Admin', createDate: '24 DEC 2015' }, { name: 'Ina Megan', email: '[email protected]', role: 'Admin', createDate: '24 DEC 2015' }, { name: 'Devin Harmon', email: '[email protected]', role: 'HR Admin', createDate: '18 DEC 2015' }, { name: 'Lena Page', email: '[email protected]', role: 'Employee', createDate: '8 DEC 2016' }, { name: 'Evie Norton', email: '[email protected]', role: 'Super Admin', createDate: '15 JAN 2017' }, { name: 'Victoria Perez', email: '[email protected]', role: 'HR Admin', createDate: '12 JAN 2019' }, { name: 'Cora Medina', email: '[email protected]', 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;