CHG collapsible admin and superadmin panels
@@ -8,6 +8,11 @@ import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import ExitToAppOutlinedIcon from '@material-ui/icons/ExitToAppOutlined';
import LaunchOutlinedIcon from '@material-ui/icons/LaunchOutlined';
+import Accordion from '@material-ui/core/Accordion';
+import AccordionSummary from '@material-ui/core/AccordionSummary';
+import AccordionDetails from '@material-ui/core/AccordionDetails';
+import Typography from '@material-ui/core/Typography';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import AuthContext from '../../Contexts/AuthContext';
import NavItem from './NavItem';
@@ -21,6 +26,9 @@ const useStyles = makeStyles((theme) => ({
categoryHeaderPrimary: {
color: theme.palette.common.white,
},
+ accordionHeader: {
+ backgroundColor: 'rgb(24, 32, 44)',
+ },
item: {
'color': 'rgba(255, 255, 255, 0.7)',
'&:hover,&:focus': {
@@ -86,16 +94,19 @@ export default function NavList({open, handleDrawerClose}) {
{(user) => (
<React.Fragment>
{user?.is_admin && (
- <React.Fragment>
- <ListItem className={classes.categoryHeader}>
- <ListItemText
+ <Accordion className={classes.accordionHeader}>
+ <AccordionSummary
classes={{
primary: classes.categoryHeaderPrimary,
}}
+ expandIcon={<ExpandMoreIcon />}
>
+ <Typography component={'h6'}>
Admin
- </ListItemText>
- </ListItem>
+ </Typography>
+ </AccordionSummary>
+ <AccordionDetails>
+ <List>
{admin_nav.map(({id: childId, icon, path}) => (
<NavItem
key={childId}
@@ -106,20 +117,24 @@ export default function NavList({open, handleDrawerClose}) {
pathname={pathname}
/>
))}
- <Divider className={classes.divider}/>
- </React.Fragment>
+ </List>
+ </AccordionDetails>
+ </Accordion>
)}
{user?.is_superuser && (
- <React.Fragment>
- <ListItem className={classes.categoryHeader}>
- <ListItemText
+ <Accordion className={classes.accordionHeader}>
+ <AccordionSummary
classes={{
primary: classes.categoryHeaderPrimary,
}}
+ expandIcon={<ExpandMoreIcon />}
>
+ <Typography component={'h6'}>
Super Admin
- </ListItemText>
- </ListItem>
+ </Typography>
+ </AccordionSummary>
+ <AccordionDetails>
+ <List>
{super_nav.map(({id: childId, icon, path}) => (
<NavItem
key={childId}
@@ -130,8 +145,9 @@ export default function NavList({open, handleDrawerClose}) {
pathname={pathname}
/>
))}
- <Divider className={classes.divider}/>
- </React.Fragment>
+ </List>
+ </AccordionDetails>
+ </Accordion>
)}
</React.Fragment>
)}
