Incorporating Material UI into my project, I decided to use a drawer for navigation. However, within the drawer, there are Collapsible lists that expand when clicked. The issue arises when the list text items are lengthy, causing the drawer to unexpectedly widen. My goal is to limit the drawer's width to 30% of the window size. Despite trying to apply classes such as root or modal to the drawer component, the desired width adjustment remains elusive.
Below is an excerpt of the Drawer code:
<Drawer classes={drawerClasses} open={showStandardDrawer} anchor={"right"} onClose={closeDrawer}>
{Array.from(items).map((item, index) => {
return (
<List
key={`list-${index}`}
component="div"
aria-labelledby="nested-list-subheader"
subheader={
<ListSubheader component="div" id="nested-list-subheader">
{item.title}
</ListSubheader>
}
className={classes.root}
>
{ item.elements.map((el, index) => {
return (
<React.Fragment key={index}>
<ListItem key={index} button onClick={() => handleExpand(index)}>
<ListItemText primary={el.name} />
{open[index] ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Collapse in={open[index]} timeout="auto" unmountOnExit>
{ el.descriptions.map((description, index) => {
return (
<List key={`l-${index}`} component="div" disablePadding>
<ListItem button className={classes.nested} >
<ListItemIcon>
<StarBorder />
</ListItemIcon>
<ListItemText primary={description} primaryTypographyProps={{noWrap:true, width:'200px'} } />
</ListItem>
</List>
)})
}</Collapse>
</React.Fragment>
)
})}
</List>
)
})}
</Drawer>
The above snippet showcases the classes applied to the drawer ('drawerClasses'):
{
root: {
maxWidth: '200px',
minWidth: '50%',
width: '50%',
overflow: 'hidden'
},
modal: {
maxWidth: '50%',
minWidth: '50%',
width: '50%'
}
}
Although these styles may not align with my preferences, they serve as an attempt to constrain the Drawer's dimensions independently rather than conforming around its child elements.