I want my drawer component to open UNDER the AppBar Component, not covering it. But this was never awsered for this new version of @Material-Ui/core.
Any idea of how can I do that?
Currently, it's opening in a way that covers AppBar. That is not what I want, I want the drawer to open UNDER the appBar component, like any normal app.
Here is my code:
const styles = theme => ({
root: {
flexGrow: 1,
},
flex: {
flex: 1,
},
menuButton: {
marginLeft: -12,
marginRight: 20,
},
list: {
width: 250,
},
});
class ClippedDrawer extends React.Component {
constructor(props){
super(props);
this.state={
open: false,
}
}
toggleDrawer(){
this.setState({
open: !this.state.open,
});
};
render(){
const { classes } = this.props;
return(
<div className={classes.root}>
<AppBar position="relative" className={classes.appBar}>
<Toolbar>
<IconButton className={classes.menuButton} onClick={()=>this.toggleDrawer()} color="inherit" aria-label="Menu">
<MenuIcon />
</IconButton>
<Typography variant="title" color="inherit" className={classes.flex}>
Title
</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
<Drawer className={classes.drawer} open={this.state.open} onClose={()=>this.toggleDrawer()}>
<div
tabIndex={0}
role="button"
onClick={()=>this.toggleDrawer()}
onKeyDown={()=>this.toggleDrawer()}
>
<div className={classes.list}>
<List>ola</List>
<Divider />
<List>xau</List>
</div>
</div>
</Drawer>
</div>
);
}
}
ClippedDrawer.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(ClippedDrawer);
Best Answer
Set the AppBar's position to relative:
If it doesn't work then you may also need to set the zIndex explicitly to 1400.