title: Drawer covers AppBar in material-ui
body: <p>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.</p>
  
  <p>Any idea of how can I do that?</p>
  
  <p>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.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>const styles = theme =&gt; ({
  
  
  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(
          &lt;div className={classes.root}&gt;
            &lt;AppBar position="relative" className={classes.appBar}&gt;
              &lt;Toolbar&gt;
                &lt;IconButton className={classes.menuButton} onClick={()=&gt;this.toggleDrawer()} color="inherit" aria-label="Menu"&gt;
                  &lt;MenuIcon /&gt;
                &lt;/IconButton&gt;
                &lt;Typography variant="title" color="inherit" className={classes.flex}&gt;
                  Title
                &lt;/Typography&gt;
                &lt;Button color="inherit"&gt;Login&lt;/Button&gt;
              &lt;/Toolbar&gt;
            &lt;/AppBar&gt;
            &lt;Drawer className={classes.drawer} open={this.state.open} onClose={()=&gt;this.toggleDrawer()}&gt;
            &lt;div
              tabIndex={0}
              role="button"
              onClick={()=&gt;this.toggleDrawer()}
              onKeyDown={()=&gt;this.toggleDrawer()}
            &gt;
              &lt;div className={classes.list}&gt;
                &lt;List&gt;ola&lt;/List&gt;
                &lt;Divider /&gt;
                &lt;List&gt;xau&lt;/List&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/Drawer&gt;
          &lt;/div&gt;
        );
      }
    }
  
  
  ClippedDrawer.propTypes = {
    classes: PropTypes.object.isRequired,
  };
  
  export default withStyles(styles)(ClippedDrawer);
  </code></pre>