I have an Appbar and a drawer right beneath it. Under both components I have 3 divs
with bootstrap and in each div
I have a group of buttons.
The problem is that the Drawer covers the Appbar and I just can't seem to move it.
Here's my code:
<div className="App">
<AppBar position="static">
<Toolbar>
<IconButton color="inherit" aria-label="Menu">
<MenuIcon />
</IconButton>
<Typography variant="title" color="inherit" aria-label="Menu">
title
</Typography>
</Toolbar>
</AppBar>
<Drawer
variant="permanent"
style={{width: '100%', zIndex: '1400', position:'absolute'}}
>
<Button>1</Button>
<Button>2</Button>
<Divider />
<Button>1</Button>
<Button>2</Button>
</Drawer>
<br />
<div className="container-full">
<div className="row">
<div class="col-sm-6">
<GridList cellHeight={50} className={styles.gridList} cols={5}>
<Button style={{width: '150px', border: '1px solid'}} variant="raised" color="primary">
<div
style={{fontSize:'12px', display: 'flex', justifyContent: 'center', textAlign:'center'}}>
Mohnweckerl Wiener Gouda
</div>
</Button>
After the first bootstrap column, another "col-sm-4"
follows and then a "col-sm-2"
. The buttons are in a GridList
Here's a visual
The Drawer should start where the arrows meet.
Any ideas?
Best Answer
The Material-UI docs call that a Drawer that's been clipped under the app bar. To achieve it, you first have to define a
z-index
for yourAppBar
yourstyles
object:And then apply that to the
AppBar
component:Since your drawer is now underneath the
AppBar
, you'll need to move the content in the drawer down the screen so that it is not hidden underneath the bar. You can accomplish that withtheme.mixins.toolbar
. First, add thetoolbar
styles:Then, add the following
div
as the very first piece of content in your drawer:The
toolbar
style will load information about the app bar height from the currenttheme
and then size thediv
so that it ensures the content doesn't get hidden by the app bar.You can find a full code sample here.