如何使用从导航栏底部开始的Materail ui react创建顶部抽屉？

npm install @material-ui/core

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 List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';

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

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

  return (
    <div className={classes.root}>
      <AppBar position="fixed" className={classes.appBar}>
        <Toolbar>
          {/* 在这里添加顶部导航栏的内容 */}
        </Toolbar>
      </AppBar>
      <Drawer
        className={classes.drawer}
        variant="permanent"
        classes={{
          paper: classes.drawerPaper,
        }}
        anchor="left"
      >
        <Toolbar />
        <List>
          {/* 在这里添加抽屉的内容 */}
        </List>
      </Drawer>
      <main className={classes.content}>
        <Toolbar />
        {/* 在这里添加主要内容 */}
      </main>
    </div>
  );
}

export default App;

<ListItem button>
  <ListItemText primary="Home" />
</ListItem>
<ListItem button>
  <ListItemText primary="About" />
</ListItem>
<ListItem button>
  <ListItemText primary="Contact" />
</ListItem>