43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
|
import React, { useState } from 'react';
|
||
|
|
import { Layout, theme } from 'antd';
|
||
|
|
import { Outlet } from 'react-router-dom';
|
||
|
|
import AppSidebar from '../components/Sidebar/index';
|
||
|
|
import AppNavbar from '../components/Navbar';
|
||
|
|
import './layout.css';
|
||
|
|
|
||
|
|
const { Header, Sider, Content } = Layout;
|
||
|
|
|
||
|
|
const MainLayout: React.FC = () => {
|
||
|
|
const [collapsed, setCollapsed] = useState(false);
|
||
|
|
const {
|
||
|
|
token: { colorBgContainer, borderRadiusLG },
|
||
|
|
} = theme.useToken();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Layout style={{ minHeight: '100vh' }}>
|
||
|
|
<Sider trigger={null} collapsible collapsed={collapsed}>
|
||
|
|
<div className="logo" />
|
||
|
|
<AppSidebar />
|
||
|
|
</Sider>
|
||
|
|
<Layout>
|
||
|
|
<Header style={{ padding: 0, background: colorBgContainer }}>
|
||
|
|
<AppNavbar collapsed={collapsed} onToggle={() => setCollapsed(!collapsed)} />
|
||
|
|
</Header>
|
||
|
|
<Content
|
||
|
|
style={{
|
||
|
|
margin: '24px 16px',
|
||
|
|
padding: 24,
|
||
|
|
minHeight: 280,
|
||
|
|
background: colorBgContainer,
|
||
|
|
borderRadius: borderRadiusLG,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Outlet />
|
||
|
|
</Content>
|
||
|
|
</Layout>
|
||
|
|
</Layout>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default MainLayout;
|