Using Material UI, how can I construct a Drawer with expandable menu items like the one on the material-ui.com site?
So I want something like this:
Each menu item (in bold) can expand to reveal sub-menu items.
How can this be achieved with Material UI?
you need a function open and close collapse
const [openCollapse, setOpenCollapse] = React.useState(false);
function handleOpenSettings(){
setOpenCollapse(!openCollapse);
}
return(
<Drawer>
<ListItem button onClick={handleOpenSettings}>
<ListItemIcon>
<Settings />
</ListItemIcon>
<ListItemText primary="Settings" />
{openCollapse ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Collapse in={openCollapse} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
<ListItem button className={classes.nested}>
<ListItemIcon>
<Settings />
</ListItemIcon>
<ListItemText inset primary="Starred" />
</ListItem>
</List>
</Collapse>
</<Drawer>
)