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

add code: Users size={20} /> }, { text: "General Settings", icon: <FiSettings size={20} /> }, { text: "Company Settings", icon: <FiDatabase size={20} /> }, { text: "Payroll Settings", icon: <FiDollarSign size={20} /> }, { text: "Account Settings", icon: <FiUser size={20} /> }, { text: "Modes and Types", icon: <FiGrid size={20} /> }, { text: "Template & Documents", icon: <FiFile size={20} /> }, { text: "My Subscription", icon: <FiBookmark size={20} /> } ]; const languages = [ { code: "en", name: "English" }, { code: "es", name: "Spanish" }, { code: "fr", name: "French" }, { code: "de", name: "German" } ]; const profileMenuItems = [ { text: "My Profile", icon: <FiUser size={20} />, action: () => handleProfileAction("profile") }, { text: "Sign Out", icon: <FiLogOut size={20} />, action: () => handleProfileAction("signout") } ]; const handleProfileClick = (event) => { setAnchorEl(event.currentTarget); }; const handleSettingsClick = (event) => { setSettingsAnchorEl(event.currentTarget); }; const handleLanguageChange = (event) => { setLanguageAnchorEl(event.currentTarget); }; const handleLanguageSelect = (languageCode) => { console.log(`Selected language: ${languageCode}`); setLanguageAnchorEl(null); }; const handleSettingsClose = () => { setSettingsAnchorEl(null); }; const handleProfileClose = () => { setAnchorEl(null); }; const handleProfileAction = (action) => { handleProfileClose(); console.log(`Profile action: ${action}`); }; const handleSettingsAction = (setting) => { handleSettingsClose(); console.log(`Selected setting: ${setting}`); }; const handleHelpClick = () => { console.log("Help clicked"); }; return ( <StyledContainer darkMode={darkMode}> <StyledAppBar position="fixed" darkMode={darkMode} elevation={0}> <Toolbar sx={{ justifyContent: "space-between" }}> <Box sx={{ display: "flex", alignItems: "center" }}> <IconButton color="inherit" onClick={() => setOpen(!open)} edge="start" sx={{ marginRight: 2, transition: "transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)", transform: open ? "rotate(0deg)" : "rotate(180deg)" }} > <FiMenu /> </IconButton> <Typography variant="h6" sx={{ fontWeight: 600 }}> Dashboard </Typography> </Box> <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}> <SearchBox placeholder="Search..." darkMode={darkMode} startAdornment={<FiSearch style={{ marginRight: 8 }} />} onChange={(e) => setSearchTerm(e.target.value)} /> <Tooltip title="Learn"> <IconButton color="inherit"> <FiBook size={20} /> </IconButton> </Tooltip> <Tooltip title="Help"> <IconButton color="inherit" onClick={handleHelpClick}> <FiHelpCircle size={20} /> </IconButton> </Tooltip> <Tooltip title="Notifications"> <IconButton color="inherit"> <Badge badgeContent={notificationCount} color="error"> <FiBell size={20} /> </Badge> </IconButton> </Tooltip> <Tooltip title="Change Language"> <IconButton color="inherit" onClick={handleLanguageChange}> <FiGlobe size={20} /> </IconButton> </Tooltip> <Menu anchorEl={languageAnchorEl} open={Boolean(languageAnchorEl)} onClose={() => setLanguageAnchorEl(null)} PaperProps={{ sx: { mt: 1.5, backgroundColor: darkMode ? modernColors.background.dark : modernColors.background.light, border: `1px solid ${darkMode ? "rgba(241, 245, 249, 0.1)" : "rgba(51, 65, 85, 0.1)"}`, borderRadius: "12px", minWidth: "150px" } }} > {languages.map((lang) => ( <MenuItem key={lang.code} onClick={() => handleLanguageSelect(lang.code)} sx={{ py: 1.5, px: 2.5, "&:hover": { backgroundColor: darkMode ? modernColors.hover.dark : modernColors.hover.light } }} > <Typography>{lang.name}</Typography> </MenuItem> ))} </Menu> <IconButton color="inherit" onClick={handleSettingsClick} sx={{ transition: "transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)", "&:hover": { transform: "rotate(90deg)" } }} > <FiSettings /> </IconButton> <SettingsMenu anchorEl={settingsAnchorEl} open={Boolean(settingsAnchorEl)} onClose={handleSettingsClose} darkMode={darkMode} anchorOrigin={{ vertical: "bottom", horizontal: "right" }} transformOrigin={{ vertical: "top", horizontal: "right" }} > {settingsMenuItems.map((item) => ( <SettingsMenuItem key={item.text} onClick={() => handleSettingsAction(item.text)} darkMode={darkMode} > <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}> {item.icon} <Typography>{item.text}</Typography> </Box> </SettingsMenuItem> ))} </SettingsMenu> <IconButton color="inherit" onClick={() => setDarkMode(!darkMode)} sx={{ transition: "transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)", "&:hover": { transform: "rotate(180deg)" } }} > {darkMode ? <FiSun /> : <FiMoon />} </IconButton> <IconButton color="inherit" onClick={handleProfileClick} sx={{ padding: "8px", borderRadius: "50%", border: `2px solid ${darkMode ? modernColors.text.dark : modernColors.text.light}`, transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)", "&:hover": { transform: "scale(1.1)" } }} >