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

基础概念

导航抽屉（Navigation Drawer）是一种常见的用户界面组件，通常用于移动应用和桌面应用中，用于展示应用的导航菜单。它通常位于屏幕的左侧或右侧，可以通过滑动或点击图标来打开。

类型

侧滑抽屉：用户可以通过从屏幕边缘向内滑动来打开。
下拉抽屉：用户可以通过点击一个按钮来展开抽屉。
模态抽屉：抽屉以模态形式弹出，通常用于重要或临时操作。

应用场景

移动应用：如社交媒体、新闻应用等。
桌面应用：如办公软件、设计工具等。

实现方法

以下是一个使用React和Material-UI实现导航抽屉并在标题中显示当前目标名称的示例代码：

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;