React-18搭建后台管理 Vite+TS+AntdesignUI -04 侧边栏布局

import React from 'react';
import { Layout, Menu, Typography } from 'antd';
import {
  UserOutlined,
  LaptopOutlined,
  NotificationOutlined,
  SettingOutlined,
} from '@ant-design/icons';
 
const { Sider } = Layout;
const { Title } = Typography;
 
const Sidebar: React.FC = () => {
  return (
    <Sider
      style={{
        overflow: 'auto',
        height: '100vh',
        position: 'fixed',
        left: 0,
      }}
    >
      <Layout style={{ minHeight: '100vh' }}>
        <Sider theme="dark" width={200}>
          <Title level={4} style={{ textAlign: 'center', color: '#fff' }}>
            Logo
          </Title>
          <Menu
            theme="dark"
            defaultSelectedKeys={['1']}
            mode="inline"
            items={[
              {
                key: '1',
                icon: <UserOutlined />,
                label: '用户管理',
              },
              {
                key: '2',
                icon: <LaptopOutlined />,
                label: '产品管理',
              },
              {
                key: '3',
                icon: <NotificationOutlined />,
                label: '通知管理',
              },
              {
                key: '4',
                icon: <SettingOutlined />,
                label: '系统设置',
              },
            ]}
          />
        </Sider>
      </Layout>
    </Sider>
  );
};
 
export default Sidebar;

这个代码实例使用了Ant Design的Layout和Menu组件来创建一个侧边栏菜单，并使用了UserOutlined、LaptopOutlined、NotificationOutlined和SettingOutlined图标。这个实例简洁明了，并且使用了React的函数组件（FC），这是目前在React社区推荐的组件编写方式。