Material UI Drawer won't move under Appbar

Question

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?

Answer 1

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 your AppBar your styles object:

const styles = theme => ({
  appBar: {
    // Make the app bar z-index always one more than the drawer z-index
    zIndex: theme.zIndex.drawer + 1,
  },
});

And then apply that to the AppBar component:

<AppBar position="absolute" className={classes.appBar}>

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 with theme.mixins.toolbar. First, add the toolbar styles:

const styles = theme => ({
  appBar: {
    zIndex: theme.zIndex.drawer + 1,
  },
  // Loads information about the app bar, including app bar height
  toolbar: theme.mixins.toolbar,
});

Then, add the following div as the very first piece of content in your drawer:

<Drawer>
  // Make sure this div is the first piece of content in your drawer
  <div className={classes.toolbar} />

  // Put your other drawer content here like you normally would
</Drawer>

The toolbar style will load information about the app bar height from the current theme and then size the div so that it ensures the content doesn't get hidden by the app bar.

You can find a full code sample here.