Material UI Drawer won't move under Appbar - html

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.

Answer 2

In MUI v5, the default zIndex values are:
const zIndex = {
mobileStepper: 1000,
fab: 1050,
speedDial: 1050,
appBar: 1100,
drawer: 1200,
modal: 1300,
snackbar: 1400,
tooltip: 1500,
};
Which explains why the drawer covers the appBar.
Another solution using ThemeProvider that simply swaps these values (Typescript):
// ./theme/index.tsx
import {
ThemeProvider as MUIThemeProvider,
createTheme,
} from "#mui/material/styles";
import { ReactNode } from "react";
interface ThemeProviderProps {
children: ReactNode;
}
export const ThemeProvider = ({ children }: ThemeProviderProps) => {
const theme = createTheme({ zIndex: { appBar: 1200, drawer: 1100 } });
return (
<MUIThemeProvider theme={theme}>
{children}
</MUIThemeProvider>
);
};
// ./App.tsx
import { ThemeProvider } from "./theme";
function App() {
return (
<div className="App">
<ThemeProvider>
// your component(s)
</ThemeProvider>
</div>
);
}