基于 Ant Design 的 Layout，我们可以封装一个双菜单栏（都为左侧菜单）的组件。

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;

在这个例子中，我们定义了一个 DoubleLeftMenuLayout 组件，该组件包含两个左侧菜单栏。左侧菜单栏使用两个 Menu 组件实现。中间部分则使用 Content 组件渲染子组件。

在 DoubleLeftMenuLayout 组件中，我们使用了 useState 来管理左侧菜单的展开和收缩状态。同时，我们在左侧菜单的每一个菜单项中使用了 Link 组件，该组件用于跳转到对应的页面。

在应用中使用 DoubleLeftMenuLayout 组件时，只需要将需要展示的子组件作为该组件的 children 属性传入即可

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;

通过这种方式，我们可以快速地构建一个双菜单栏的布局，并且可以根据需要自定义菜单项和路由。