import React, { useState } from 'react';
import { Layout, Button, Menu } from 'antd';
import './layout.css'
import {
ContainerOutlined,
DesktopOutlined,
MailOutlined,
MenuFoldOutlined,
MenuUnfoldOutlined,
PieChartOutlined,
} from '@ant-design/icons';
import { Outlet, useNavigate } from 'react-router-dom';
const { Header, Sider, Content } = Layout;
const headerStyle = {
color: '#fff',
height: 64,
paddingInline: 50,
lineHeight: '64px',
backgroundColor: '#7dbcea',
};
const contentStyle = {
minHeight: 120,
lineHeight: '120px',
color: '#fff',
backgroundColor: '#108ee9',
};
const siderStyle = {
lineHeight: '120px',
color: '#fff',
backgroundColor: '#3ba0e9',
};
export default function Layouts() {
const nav = useNavigate();
function getItem(label, key, icon, children, type) {
return {
key,
icon,
children,
label,
type,
};
}
const items = [
getItem('我的项目', '1', <PieChartOutlined onClick={() => nav('/')} />),
getItem('我的任务', '2', <DesktopOutlined onClick={() => nav('/layout/task')} />),
getItem('已归档', '3', <ContainerOutlined />),
getItem('回收站', 'sub1', <MailOutlined />, [
getItem('Option 5', '5'),
getItem('Option 6', '6'),
getItem('Option 7', '7'),
getItem('Option 8', '8'),
]),
];
const [collapsed, setCollapsed] = useState(false);
const toggleCollapsed = () => {
setCollapsed(!collapsed);
};
return (
<div>
<Layout>
<Sider style={siderStyle}>
<Button
type="primary"
onClick={toggleCollapsed}
style={{
marginBottom: 16,
}}
>
{collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
</Button>
<Menu
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
mode="inline"
theme="dark"
inlineCollapsed={collapsed}
items={items}
/>
</Sider>
<Layout>
<Header style={headerStyle}>Header</Header>
<Content style={contentStyle}>
<Outlet />
</Content>
</Layout>
</Layout>
</div>
)
}
结合Ant Design实现一个侧边栏的功能
最新推荐文章于 2024-05-13 09:58:18 发布