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

could you improve the UI of this file, but dont change any thing keep it as it is exactly : import React, { useEffect, useState } from 'react'; import { List, ListItemButton, ListItemIcon, ListItemText, IconButton, Divider, Box, Tooltip, } from '@mui/material'; import { Dashboard as DashboardIcon, Settings as SettingsIcon, School as SchoolIcon, Groups as GroupsIcon, AdminPanelSettings as AdminPanelSettingsIcon, ContactMail as ContactMailIcon, VideoCall as VideoCallIcon, ExitToApp as ExitToAppIcon, ChevronLeft, ChevronRight, } from '@mui/icons-material'; import { logoutUser, getUserProfile } from 'services/authService'; import { useNavigate } from 'react-router-dom'; const SidebarContent = () => { const navigate = useNavigate(); const [role, setRole] = useState(''); const [collapsed, setCollapsed] = useState(false); useEffect(() => { (async () => { const profile = await getUserProfile(); setRole(profile?.role || ''); })(); }, []); const isAdmin = role === 'Admin'; const isTeacher = role === 'Teacher'; const handleNavigate = (href) => { if (href) navigate(href); }; const SidebarItem = ({ icon, label, href, onClick }) => ( <Tooltip title={collapsed ? label : ''} placement="right"> <ListItemButton onClick={() => { if (onClick) onClick(); else handleNavigate(href); }} sx={{ justifyContent: collapsed ? 'center' : 'flex-start', px: 2, }} > <ListItemIcon sx={{ minWidth: 0, mr: collapsed ? 0 : 2 }}>{icon}</ListItemIcon> {!collapsed && <ListItemText primary={label} />} </ListItemButton> </Tooltip> ); return ( <Box sx={{ width: collapsed ? 72 : 240, transition: 'width 0.3s', height: '100vh', borderRight: '1px solid #ddd', bgcolor: 'background.paper', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', position: 'sticky', top: 0, }} > <Box> <List component="nav" disablePadding> <SidebarItem icon={<DashboardIcon />} label="Accueil" href="/" /> <SidebarItem icon={<SettingsIcon />} label="Paramètres" href="/edit-profile" /> <SidebarItem icon={<SchoolIcon />} label="Matières" href="/home" /> {(isAdmin || isTeacher) && ( <SidebarItem icon={<GroupsIcon />} label="Séances" href="/meetings-calendar" /> )} {isAdmin && ( <SidebarItem icon={<AdminPanelSettingsIcon />} label="Gestion des rôles" href="/manage-roles" /> )} <SidebarItem icon={<ContactMailIcon />} label="Contact" href="/contact" /> <SidebarItem icon={<VideoCallIcon />} label="Cours en directe" href="/live-course" /> <SidebarItem icon={<ExitToAppIcon />} label="Se déconnecter" onClick={logoutUser} /> </List> </Box> <Divider /> <Box p={1} display="flex" justifyContent={collapsed ? 'center' : 'flex-end'}> <IconButton size="small" onClick={() => setCollapsed(!collapsed)}> {collapsed ? <ChevronRight /> : <ChevronLeft />} </IconButton> </Box> </Box> ); }; export default SidebarContent;