42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Layout } 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);
|
|
|
|
return (
|
|
<Layout className="main-layout">
|
|
<Sider className="main-sider" trigger={null} collapsible collapsed={collapsed} width={260}>
|
|
<div className="logo">
|
|
<div className="logo-mark">pms</div>
|
|
{!collapsed ? (
|
|
<div className="logo-copy">
|
|
<span className="logo-kicker">UNISSENSE PMS</span>
|
|
<strong className="logo-title">新光线平台</strong>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
<AppSidebar />
|
|
</Sider>
|
|
<Layout className="main-layout-body">
|
|
<Header className="main-header">
|
|
<AppNavbar collapsed={collapsed} onToggle={() => setCollapsed(!collapsed)} />
|
|
</Header>
|
|
<Content className="main-content">
|
|
<div className="main-content-panel">
|
|
<Outlet />
|
|
</div>
|
|
</Content>
|
|
</Layout>
|
|
</Layout>
|
|
);
|
|
};
|
|
|
|
export default MainLayout;
|