在标题中显示当前目标名称的导航抽屉

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

const drawerWidth = 240;

function App() {
  const [open, setOpen] = useState(false);
  const [currentTab, setCurrentTab] = useState('Home');

  const handleDrawerOpen = () => {
    setOpen(true);
  };

  const handleDrawerClose = () => {
    setOpen(false);
  };

  const handleTabChange = (tab) => {
    setCurrentTab(tab);
  };

  return (
    <div>
      <AppBar position="static">
        <Toolbar>
          <IconButton edge="start" color="inherit" aria-label="menu" onClick={handleDrawerOpen}>
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" style={{ flexGrow: 1 }}>
            {currentTab}
          </Typography>
        </Toolbar>
      </AppBar>
      <Drawer
        variant="persistent"
        anchor="left"
        open={open}
        onClose={handleDrawerClose}
        classes={{
          paper: 'drawer-paper',
        }}
      >
        <List>
          {['Home', 'Profile', 'Settings'].map((text) => (
            <ListItem button key={text} onClick={() => handleTabChange(text)}>
              <ListItemText primary={text} />
            </ListItem>
          ))}
        </List>
      </Drawer>
      <main style={{ marginLeft: drawerWidth, padding: 24 }}>
        {/* Content for the current tab */}
        <Typography paragraph>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </Typography>
      </main>
    </div>
  );
}

export default App;