I'm creating a single-page application (Material-UI based) with an AppBar (+ ToolBar) and a Drawer. At the moment, the Drawer overlaps the AppBar and under no circumstances can I get the Drawer to move down, so it is basically positioned right under the AppBar.

I tried adding some padding, but this does not do anything. I'm using makeStyles for styling of most of the components, and I am wondering if it is even possible to position the Drawer below the AppBar.

Is there any way to position the drawer below the AppBar?

I have a lot of code, but the makeStyle function is simple:

const useStyles = makeStyles((theme) => ({
  root: {
    display: 'flex',
  },
  appBar: {
    zIndex: theme.zIndex.drawer + 1,
  },
  title: {
    flexGrow: 1,
  },
  toolbar: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-end',
    padding: theme.spacing(0, 1),
    ...theme.mixins.toolbar,
  },
  content: {
    flexGrow: 1,
    padding: theme.spacing(3),
  },
  drawer: {
    paddingTop: 30
  },
}));

and the main component (that includes the Drawer:

<div className={classes.root}>
        <AppBar position="absolute" >
          <Toolbar>  
            <Typography component="h1" variant="h6" noWrap className={classes.title}>
              x
            </Typography>
            <Switch checked={isDarkTheme} onChange={handleThemeSwitch}/>
            <WbIncandescentIcon />
          </Toolbar>
        </AppBar>
        <ServiceDrawer className={classes.drawer} 
        onOperationSelected={onOperationSelect} serviceList={services} onDrawerOpen={onDrawerOpen} onDrawerClose={onDrawerClose}> 
        </ServiceDrawer>
        <main className={classes.content}>
            <div className={classes.toolbar} />
            {selectedOperation && <Operation operation={selectedOperation}/>}
        </main>
    </div>