ReactJS Material UI Drawer Display Issue - reactjs

Question

I used the Material UI API for Drawer (found here) to create a sidebar component. However, when I render this component on a screen along with other components, it is displayed under the other components as shown below :
I tried to add an elevation property, hoping it would resolve the issue, but that didn't work. Is there a way to overcome this? Here is the code:
const drawerWidth = '224px';
interface propsDashBoard {
itemsBeforeDivider: ItemData[];
}
interface ItemData {
name: string;
Icon: OverridableComponent<SvgIconTypeMap<{}, "svg">>;
routeAddress: string;
}
const history = createBrowserHistory();
const useStyles = makeStyles((theme) => ({
root: {
display: 'flex',
position: 'relative',
backgroundColor: COLOR.NEUTRAL.WHITE,
},
drawer: {
[theme.breakpoints.up('sm')]: {
width: drawerWidth,
flexShrink: 0,
position: 'absolute',
zIndex: -1,
boxShadow: '0px 1px 1px red',
},
},
appBar: {
[theme.breakpoints.up('sm')]: {
//width: `calc(100% - ${drawerWidth}px)`,
margin: '0px',
backgroundColor: COLOR.NEUTRAL.WHITE,
// position: 'absolute',
boxShadow:'0px 1px 0px #DBE1E7',
},
},
menuButton: {
marginRight: theme.spacing(2),
[theme.breakpoints.up('sm')]: {
display: 'none',
backgroundColor: COLOR.NEUTRAL.WHITE,
},
},
// necessary for content to be below app bar
toolbar: theme.mixins.toolbar,
drawerPaper: {
width: drawerWidth,
paddingLeft: '33px',
},
content: {
flexGrow: 1,
},
cssBaseline: {
boxShadow:'none',
},
navBar: {
backgroundColor: COLOR.NEUTRAL.WHITE,
},
}));
const MyDrawer =(props: propsDashBoard) => {
const {
itemsBeforeDivider,
} = props;
const classes = useStyles();
const theme = useTheme();
const [mobileOpen, setMobileOpen] = React.useState(false);
const handleDrawerToggle = () => {
setMobileOpen(!mobileOpen);
};
return (
<Router history={history}>
<nav className={classes.drawer} aria-label="mailbox folders">
<Drawer
variant="temporary"
anchor ={theme.direction === 'rtl' ? 'right' : 'left'}
open={mobileOpen}
onClose={handleDrawerToggle}
classes={{
paper: classes.drawerPaper
}}
ModalProps={{
keepMounted: true, // Better open performance on mobile.
}}
>
<div>
<div className={classes.toolbar} />
<Divider />
<List>
{itemsBeforeDivider.map(({name, Icon, routeAddress}) => (
<ListItem button key={name} component={Link} to={routeAddress}>
<ListItemIcon><Icon /></ListItemIcon>
<ListItemText primary={name} />
</ListItem>
))}
</List>
<Divider />
</div>
</Drawer>
<Hidden xsDown implementation="css">
<Drawer
classes={{
paper: classes.drawerPaper,
}}
variant="permanent"
open
>
<div>
<div className={classes.toolbar} />
<Divider />
<List>
{itemsBeforeDivider.map(({name, Icon, routeAddress}) => (
<ListItem button key={name} component={Link} to={routeAddress}>
<ListItemIcon><Icon /></ListItemIcon>
<ListItemText primary={name} />
</ListItem>
))}
</List>
<Divider />
</div>
</Drawer>
</Hidden>
</nav>
</Router>
);
}
const WhiteTypography = withStyles({
root: {
backgroundColor: COLOR.NEUTRAL.WHITE,
variant:"h6",
noWrap:"true",
}
})(Typography);
function DashBoard (props: propsDashBoard) {
const {
itemsBeforeDivider,
} = props;
const classes = useStyles();
const theme = useTheme();
const [mobileOpen, setMobileOpen] = React.useState(false);
const handleDrawerToggle = () => {
setMobileOpen(!mobileOpen);
};
return (
<div className={classes.root}>
<CssBaseline classes={classes.cssBaseline} />
<AppBar position="fixed" className={classes.appBar}>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
edge="start"
onClick={handleDrawerToggle}
className={classes.menuButton}
>
<MenuIcon />
</IconButton>
</Toolbar>
</AppBar>
<MyDrawer itemsBeforeDivider={itemsBeforeDivider}/>
</div>
);
}

Answer 1

You can trying giving drawerWidth value like 150 or so and don't give value in pixel.