feat: 侧边栏

src/App.jsx

@@ -5,15 +5,27 @@ import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'
 import styled from 'styled-components'
 const { Content, Sider } = Layout
 
-const MenuItem = Menu.Item
-
-const DemoTitle = styled.div`
-  height: 32px;
-  margin: 16px;
-  background: rgba(255, 255, 255, 0.2);
-  text-align: center;
-  color: #fff;
-  line-height: 32px;
+const SidebarDiv = styled.div`
+  .sidebar {
+    overflow: auto;
+    height: 100vh;
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+  }
+  .content {
+    overflow: initial;
+    margin-left: 200px;
+  }
+  .headerLogo {
+    height: 32px;
+    margin: 16px;
+    background: rgba(255, 255, 255, 0.2);
+    text-align: center;
+    color: #fff;
+    line-height: 32px;
+  }
 `
 
 export default function Sidebar() {
@@ -38,25 +50,27 @@ export default function Sidebar() {
   const list = routesInfo.concat(...childrenList)
 
   return (
-    <Router>
-      <Layout hasSider>
-        <Sider>
-          <DemoTitle>ai中台demo</DemoTitle>
-          <Menu theme="dark" mode="inline" items={menus} />
-        </Sider>
-        <Content>
-          <Routes>
-            {list.map((route, index) => (
-              <Route
-                key={index}
-                path={route.path}
-                exact={route?.exact}
-                element={route.component}
-              />
-            ))}
-          </Routes>
-        </Content>
-      </Layout>
-    </Router>
+    <SidebarDiv>
+      <Router>
+        <Layout hasSider>
+          <Sider className="sidebar">
+            <div className="headerLogo">ai中台demo</div>
+            <Menu theme="dark" mode="inline" items={menus} />
+          </Sider>
+          <Content className="content">
+            <Routes>
+              {list.map((route, index) => (
+                <Route
+                  key={index}
+                  path={route.path}
+                  exact={route?.exact}
+                  element={route.component}
+                />
+              ))}
+            </Routes>
+          </Content>
+        </Layout>
+      </Router>
+    </SidebarDiv>
   )
 }

src/index.css

@@ -1,3 +1,3 @@
-section {
+/* section {
   height: 100vh;
-}
+} */