49 lines
1.7 KiB
JavaScript
49 lines
1.7 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Layout, Menu, theme, Button } from 'antd';
|
|
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
|
|
import { Router } from '../router';
|
|
import { usePageTitle } from '../hooks/page-title-context';
|
|
import Navbar from './nav/Navbar';
|
|
const { Header, Content, Footer, Sider } = Layout;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const AppLayout = ({ navbar, footer }) => {
|
|
const [collapsed, setCollapsed] = useState(false);
|
|
const { pageTitle } = usePageTitle();
|
|
const {
|
|
token: { colorBgContainer, borderRadiusLG },
|
|
} = theme.useToken();
|
|
|
|
return (
|
|
<Layout >
|
|
<Sider breakpoint="lg" collapsible collapsed={collapsed}>
|
|
<div className="demo-logo-vertical" />
|
|
<Navbar/>
|
|
</Sider>
|
|
<Layout>
|
|
<Header style={{ padding: 0, background: colorBgContainer }}>
|
|
<Button type="text" icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />} onClick={() => setCollapsed(!collapsed)} style={{fontSize: '16px', width: 64, height: 64}}/>
|
|
{pageTitle}
|
|
</Header>
|
|
|
|
<Content style={{margin: '24px 16px 0'}}>
|
|
<div style={{padding: 24, minHeight: 360, background: colorBgContainer, borderRadius: borderRadiusLG}}>
|
|
<Router />
|
|
</div>
|
|
</Content>
|
|
<Footer style={{ textAlign: 'center' }}>
|
|
{footer}
|
|
<br />
|
|
Ant Design ©{new Date().getFullYear()} Created by Ant UED
|
|
</Footer>
|
|
</Layout>
|
|
</Layout>
|
|
);
|
|
};
|
|
export default AppLayout; |