layout + navbar

src/components/app-layout.jsx

@@ -0,0 +1,49 @@
+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 <EFBFBD>{new Date().getFullYear()} Created by Ant UED
+                </Footer>
+            </Layout>
+        </Layout>
+    );
+};
+export default AppLayout;