feat: 左侧菜单栏兼容移动端

src/layout/components/Sidebar/index.vue

@@ -1,19 +1,27 @@
 <template>
-  <div
-    class="mobile-sider"
-    v-if="isMobile"
+  <a-button
+    class="open-icon"
+    type="primary"
+    @click="openDrawer"
   >
-    <div></div>
+    <right-outlined />
+  </a-button>
+
+  <a-drawer
+      placement="left"
+      :closable="false"
+      :open="drawerVisible"
+      :get-container="false"
+      :style="{ position: 'absolute' }"
+      width="240px"
+      @close="drawerVisible = false"
+    >
     <a-layout-sider
         :trigger="null"
         v-model:collapsed="collapsed"
         collapsible
         :style="{backgroundColor: bgColor, overflow: 'hidden'}"
-        breakpoint="lg"
       >
-        <div class="logo" >
-          <img :src="logoPng" alt="">
-        </div>
         <a-menu
           v-model:selectedKeys="selectedKeys"
           :openKeys="openKeys"
@@ -28,10 +36,10 @@
           />
         </a-menu>
     </a-layout-sider>
-  </div>
+  </a-drawer>
 
   <a-layout-sider
-        v-else
+        v-if="!isMobile"
         :trigger="null"
         v-model:collapsed="collapsed"
         collapsible
@@ -65,6 +73,8 @@ import SidebarItem from './SidebarItem.vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useDesignStore } from '@/store'
 import { useDeviceType } from '@/hooks'
+import { RightOutlined } from '@ant-design/icons-vue'
+import { routes } from '@/router/index'
 
 const logoPng = require('@/assets/logo.png')
 
@@ -86,10 +96,12 @@ const selectedKeys = ref<string[]>()
 
 const openKeys = ref<string[]>()
 
+const drawerVisible = ref<boolean>(false)
+
 watch(
   () => route.path,
   () => {
-    sidebarRoute.value = isMobile ? router.getRoutes() : router.getRoutes().find(item => item.path === route.matched[0].path)?.children
+    sidebarRoute.value = isMobile ? routes : router.getRoutes().find(item => item.path === route.matched[0].path)?.children
     selectedKeys.value = [route.path]
     openKeys.value = [route.matched[1].path]
   },
@@ -98,6 +110,8 @@ watch(
   }
 )
 
+const openDrawer = () => drawerVisible.value = true
+
 </script>
 
 <style lang="less" scoped >
@@ -123,8 +137,22 @@ watch(
 .mobile-sider {
   width: 100vw;
   height: 100vh;
-  background-color: rgba(0, 0, 0, 130);
+  background-color: rgba(0, 0, 0, 0.5);
   pointer-events: none;
 }
 
+.open-icon {
+  width: 50px;
+  height: 50px;
+  position: fixed;
+  top: 200px;
+  left: 0px;
+  z-index: 999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+
 </style>

src/layout/layout.vue

@@ -1,13 +1,13 @@
 <template>
     <a-layout class="a-layout" >
-      <SiderBar v-if="!isMobile"  />
+      <SiderBar />
       <a-layout >
         <Navbar v-if="!isMobile" />
         <span style="padding: 0 24px 24px;margin-top: 24px;overflow: hidden;overflow-y: scroll" >
           <RouterView></RouterView>
         </span>
       </a-layout>
-  </a-layout>
+    </a-layout>
 </template>
 
 <script  lang="ts" setup >