Based on Ant Design's Layout, we can encapsulate a dual menu bar (both are left menu) components.

import React, { useState } from 'react';
import { Layout, Menu } from 'antd';
import {
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
  SettingOutlined,
  AuditOutlined,
} from '@ant-design/icons';
import { Link } from 'react-router-dom';

const { Sider, Content } = Layout;

const DoubleLeftMenuLayout = ({ children }) => {
  const [collapsed, setCollapsed] = useState(false);

  const toggle = () => {
    setCollapsed(!collapsed);
  };

  return (
    <Layout style={
   
   { minHeight: '100vh' }}>
      <Sider trigger={null} collapsible collapsed={collapsed} theme="light">
        <div className="logo" />
        <Menu theme="light" mode="inline" defaultSelectedKeys={['1']}>
          <Menu.Item key="1" icon={<UserOutlined />}>
            <Link to="/users">用户管理</Link>
          </Menu.Item>
          <Menu.Item key="2" icon={<VideoCameraOutlined />}>
            <Link to="/videos">视频管理</Link>
          </Menu.Item>
          <Menu.Item key="3" icon={<UploadOutlined />}>
            <Link to="/upload">上传视频</Link>
          </Menu.Item>
        </Menu>
        <Menu theme="light" mode="inline" defaultSelectedKeys={['1']}>
          <Menu.Item key="4" icon={<SettingOutlined />}>
            <Link to="/settings">系统设置</Link>
          </Menu.Item>
          <Menu.Item key="5" icon={<AuditOutlined />}>
            <Link to="/logs">系统日志</Link>
          </Menu.Item>
        </Menu>
      </Sider>
      <Layout className="site-layout">
        <Content
          className="site-layout-background"
          style={
   
   {
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
          }}
        >
          {children}
        </Content>
      </Layout>
    </Layout>
  );
};

export default DoubleLeftMenuLayout;

In this example, we define a DoubleLeftMenuLayoutcomponent that contains two left menu bars. The left menu bar Menuis implemented using two components. The middle part uses Contentthe component to render child components.

In DoubleLeftMenuLayoutthe component, we use useStateto manage the expanded and collapsed state of the left menu. At the same time, we use Linkthe component in each menu item of the left menu, which is used to jump to the corresponding page.

When using the component in an application DoubleLeftMenuLayout, you only need to pass in the subcomponents that need to be displayed as the component's childrenproperty

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import DoubleLeftMenuLayout from './components/DoubleLeftMenuLayout';
import UsersPage from './pages/UsersPage';
import VideosPage from './pages/VideosPage';
import UploadPage from './pages/UploadPage';
import SettingsPage from './pages/SettingsPage';
import LogsPage from './pages/LogsPage';

const App = () => {
  return (
    <DoubleLeftMenuLayout>
      <Switch>
        <Route exact path="/users" component={UsersPage} />
        <Route exact path="/videos" component={VideosPage} />
        <Route exact path="/upload" component={UploadPage} />
        <Route exact path="/settings" component={SettingsPage} />
        <Route exact path="/logs" component={LogsPage} />
      </Switch>
    </DoubleLeftMenuLayout>
  );
};

export default App;

In this way, we can quickly build a dual menu bar layout, and customize the menu items and routing as needed.