You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
2.0 KiB
107 lines
2.0 KiB
import React, { useState } from 'react';
|
|
import {
|
|
DesktopOutlined,
|
|
FileOutlined,
|
|
MenuFoldOutlined,
|
|
MenuUnfoldOutlined,
|
|
PieChartOutlined,
|
|
TeamOutlined,
|
|
UserOutlined,
|
|
} from '@ant-design/icons';
|
|
import type { MenuProps } from 'antd';
|
|
import { Layout, Menu, theme } from 'antd';
|
|
|
|
const { Header, Sider, Content } = Layout;
|
|
|
|
const items: MenuProps['items'] = [
|
|
{
|
|
key: '1',
|
|
icon: <PieChartOutlined />,
|
|
label: 'Option 1',
|
|
},
|
|
{
|
|
key: '2',
|
|
icon: <DesktopOutlined />,
|
|
label: 'Option 2',
|
|
},
|
|
{
|
|
key: 'sub1',
|
|
icon: <UserOutlined />,
|
|
label: 'User',
|
|
children: [
|
|
{
|
|
key: '3',
|
|
label: 'Tom',
|
|
},
|
|
{
|
|
key: '4',
|
|
label: 'Bill',
|
|
},
|
|
{
|
|
key: '5',
|
|
label: 'Alex',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
key: 'sub2',
|
|
icon: <TeamOutlined />,
|
|
label: 'Team',
|
|
children: [
|
|
{
|
|
key: '6',
|
|
label: 'Team 1',
|
|
},
|
|
{
|
|
key: '7',
|
|
label: 'Team 2',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
key: '9',
|
|
icon: <FileOutlined />,
|
|
},
|
|
];
|
|
|
|
const App: React.FC = () => {
|
|
const [collapsed, setCollapsed] = useState(true);
|
|
const {
|
|
token: { colorBgContainer },
|
|
} = theme.useToken();
|
|
|
|
return (
|
|
<Layout>
|
|
<Sider trigger={null} collapsible collapsed={collapsed}>
|
|
<div className="logo" />
|
|
<Menu
|
|
theme="dark"
|
|
mode="inline"
|
|
defaultSelectedKeys={['3']}
|
|
defaultOpenKeys={['sub1']}
|
|
items={items}
|
|
/>
|
|
</Sider>
|
|
<Layout>
|
|
<Header style={{ padding: 0, background: colorBgContainer }}>
|
|
{React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
|
|
className: 'trigger',
|
|
onClick: () => setCollapsed(!collapsed),
|
|
})}
|
|
</Header>
|
|
<Content
|
|
style={{
|
|
margin: '24px 16px',
|
|
padding: 24,
|
|
minHeight: 280,
|
|
background: colorBgContainer,
|
|
}}
|
|
>
|
|
Content
|
|
</Content>
|
|
</Layout>
|
|
</Layout>
|
|
);
|
|
};
|
|
|
|
export default App;
|
|
|