Drawer covers AppBar in material-ui

Question

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);

Answer 1

Set the AppBar's position to relative:

appBar: {
    ...
    position: 'relative',
    zIndex: theme.zIndex.drawer + 1,
},

If it doesn't work then you may also need to set the zIndex explicitly to 1400.

Answer 2

You will have to set CSS z-index property for the appBar class in styles

    [theme.breakpoints.up("sm")]: {
      width: "100%"
    },
    zIndex: theme.zIndex.drawer + 1
  }

This appBar class in default class for AppBar component In your case there might be a marginLeft for the appBar and for theme.breakpoints.up("sm") width might be calc(100% - (drawerWidth)) replace it with width 100%

Hope this helps

Answer 3

For me adding position prop to AppBar fixed the issue. Eg.

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

Answer 4

For anyone else looking for a solution to this very annoying problem (that the header covers part of the drawer), here is my solution (alongside the zIndex) for drawers with a non-fixed header:

put an empty div with useRef() below the header, and then ref.current.getBoundingClientRect().top when the button is clicked, and pass it through to your drawer style for paddingTop.

This gets the pixel distance from the div from the top of the screen at the point that the button is clicked, so the drawer will always have the correct padding.

Answer 5

I encountered this issue too when using the "next" (v5) version of Material-UI. I looked at the example of a drawer clipped under the app bar in the next version's documentation and there were few differences between the example and my own code. What fixed this issue for me was using StyledEngineProvider around my app component. As soon as I used that, my drawer immediately tucked itself under the app bar.

import * as React from 'react';
import ReactDOM from 'react-dom';
import StyledEngineProvider from '@material-ui/core/StyledEngineProvider';
import App from './App';

ReactDOM.render(
  <StyledEngineProvider injectFirst>
    <App />
  </StyledEngineProvider>,
  document.querySelector("#root")
);

Answer 6

In your classes of Drawer component, in paper: { background: "transparent" } and then whatever is your content within the drawer, wrap it with a from Material-UI, set it's styles so that it can shift down the # of pixels as your appBar's height. And then style it accordingly. :)

Answer 7

You can set the position of the App bar to absolute in your styles and put a margin to the Drawer to be in the right position.

But check the docs there is a lot of examples there https://material-ui.com/demos/drawers/