如何将material ui应用程序抽屉放在页眉下面

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';

const useStyles = makeStyles((theme) => ({
  root: {
    display: 'flex',
  },
  appBar: {
    zIndex: theme.zIndex.drawer + 1,
  },
  drawer: {
    width: 240,
    flexShrink: 0,
  },
  drawerPaper: {
    width: 240,
  },
  content: {
    flexGrow: 1,
    padding: theme.spacing(3),
  },
}));

const App = () => {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <AppBar position="fixed" className={classes.appBar}>
        <Toolbar>
          <IconButton edge="start" color="inherit" aria-label="menu">
            <MenuIcon />
          </IconButton>
          {/* 在这里添加页眉内容 */}
        </Toolbar>
      </AppBar>
      <Drawer
        className={classes.drawer}
        variant="permanent"
        classes={{
          paper: classes.drawerPaper,
        }}
      >
        {/* 在这里添加抽屉内容 */}
      </Drawer>
      <main className={classes.content}>
        {/* 在这里添加主要内容 */}
      </main>
    </div>
  );
};

export default App;

import Typography from '@material-ui/core/Typography';

// ...

<AppBar position="fixed" className={classes.appBar}>
  <Toolbar>
    <IconButton edge="start" color="inherit" aria-label="menu">
      <MenuIcon />
    </IconButton>
    <Typography variant="h6" noWrap>
      页眉内容
    </Typography>
  </Toolbar>
</AppBar>

import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';

// ...

<Drawer
  className={classes.drawer}
  variant="permanent"
  classes={{
    paper: classes.drawerPaper,
  }}
>
  <List>
    <ListItem button>
      <ListItemText primary="菜单项1" />
    </ListItem>
    <ListItem button>
      <ListItemText primary="菜单项2" />
    </ListItem>
    {/* 添加更多菜单项 */}
  </List>
</Drawer>