import Avatar from "@material-ui/core/Avatar" ; import Box from "@material-ui/core/Box" ; import Drawer from "@material-ui/core/Drawer" ; import List from "@material-ui/core/List" ; import ListItem from "@material-ui/core/ListItem" ; import ListItemAvatar from "@material-ui/core/ListItemAvatar" ; import ListItemText from "@material-ui/core/ListItemText" ; import AccountTreeIcon from "@material-ui/icons/AccountTree" ; import BarChartIcon from "@material-ui/icons/BarChart" ; import EventIcon from "@material-ui/icons/Event" ; import HelpCenterIcon from "@material-ui/icons/HelpCenter" ; import HomeIcon from "@material-ui/icons/Home" ; import PeopleIcon from "@material-ui/icons/People" ; import PersonIcon from "@material-ui/icons/Person" ; import SettingsIcon from "@material-ui/icons/Settings" ; import { useTranslation } from "react-i18next" ; import { NavLink } from "react-router-dom" ; import { useAuth } from "../../auth/contexts/AuthProvider" ; import Logo from "../../core/components/Logo" ; import { drawerCollapsedWidth , drawerWidth } from "../../core/config/layout" ; type AdminDrawerProps = { collapsed : boolean ; mobileOpen : boolean ; onDrawerToggle : ( ) => void ; onSettingsToggle : ( ) => void ; } ; export const menuItems = [ { icon : HomeIcon , key : "admin.drawer.menu.home" , path : "/admin" , } , { icon : BarChartIcon , key : "admin.drawer.menu.dashboard" , path : "/admin/dashboard" , } , { icon : PeopleIcon , key : "admin.drawer.menu.userManagement" , path : "/admin/user-management" , } , { icon : EventIcon , key : "admin.drawer.menu.calendar" , path : "/admin/calendar" , } , { icon : AccountTreeIcon , key : "admin.drawer.menu.projects" , path : "/admin/projects" , } , { icon : HelpCenterIcon , key : "admin.drawer.menu.help" , path : "/admin/help" , } , ] ; const AdminDrawer = ( { collapsed , mobileOpen , onDrawerToggle , onSettingsToggle , } ) => { const { userInfo } = useAuth ( ) ; const { t } = useTranslation ( ) ; const width = collapsed ? drawerCollapsedWidth : drawerWidth ; const drawer = ( < Box sx = { { display : "flex" , flexDirection : "column" , minHeight : "100%" } } > < Logo sx = { { display : "flex" , p : 4 } } /> < List component = "nav" sx = { { px : 2 } } > { menuItems . map ( ( item ) => ( < ListItem button component = { NavLink } key = { item . path } activeClassName = "Mui-selected" end = { true } to = { `/${ process . env . PUBLIC_URL }${ item . path }` } > < ListItemAvatar > < Avatar sx = { { color : "inherit" , bgcolor : "transparent" } } > < item . icon /> < /Avatar> < /ListItemAvatar> < ListItemText primary = { t ( item . key ) } sx = { { display : collapsed ? "none" : "block" , } } /> < /ListItem>))} < /List> < Box sx = { { flexGrow : 1 } } /> < List component = "nav" sx = { { p : 2 } } > < ListItem button component = { NavLink } to = { `/${ process . env . PUBLIC_URL }/admin/profile` } > < ListItemAvatar > < Avatar > < PersonIcon /> < /Avatar> < /ListItemAvatar> { userInfo && ( < ListItemText primary = { `${ userInfo . firstName } ${ userInfo . lastName }` } sx = { { display : collapsed ? "none" : "block" , } } />)} < /ListItem> < ListItem button onClick = { onSettingsToggle } > < ListItemAvatar > < Avatar > < SettingsIcon /> < /Avatar> < /ListItemAvatar> < ListItemText primary = { t ( "admin.drawer.menu.settings" ) } sx = { { display : collapsed ? "none" : "block" , } } /> < /ListItem> < /List> < /Box>); return ( < Box aria - label = "Admin drawer" component = "nav" sx = { { width : { lg : width } , flexShrink : { lg : 0 } , } } > { } < Drawer variant = "temporary" open = { mobileOpen } onClose = { onDrawerToggle } ModalProps = { { keepMounted : true , } } sx = { { display : { xs : "block" , lg : "none" } , "& .MuiDrawer-paper" : { boxSizing : "border-box" , width : width , } , } } > { drawer } < /Drawer> < Drawer variant = "permanent" open sx = { { display : { xs : "none" , lg : "block" } , "& .MuiDrawer-paper" : { boxSizing : "border-box" , width : width , } , } } > { drawer } < /Drawer> < /Box>); } ; export default AdminDrawer ;