将AppBar与material ui中的抽屉组合

import React from 'react';
import { AppBar, Drawer, IconButton, List, ListItem, ListItemIcon, ListItemText, Toolbar } from '@material-ui/core';
import MenuIcon from '@material-ui/icons/Menu';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      drawerOpen: false
    };
  }

  toggleDrawer = () => {
    this.setState({ drawerOpen: !this.state.drawerOpen });
  }
}

render() {
  return (
    <div>
      <AppBar position="static">
        <Toolbar>
          <IconButton edge="start" color="inherit" onClick={this.toggleDrawer}>
            <MenuIcon />
          </IconButton>
        </Toolbar>
      </AppBar>
      <Drawer open={this.state.drawerOpen} onClose={this.toggleDrawer}>
        <List>
          <ListItem button>
            <ListItemIcon><Icon /></ListItemIcon>
            <ListItemText primary="Item 1" />
          </ListItem>
          <ListItem button>
            <ListItemIcon><Icon /></ListItemIcon>
            <ListItemText primary="Item 2" />
          </ListItem>
          {/* 添加更多的菜单项 */}
        </List>
      </Drawer>
      {/* 页面内容 */}
    </div>
  );
}