优化sidebar适配

src/assets/styles/sidebar.scss

@@ -1,22 +1,15 @@
 #app {
-  .layout-sidebar__container {
+  .sidebar {
+    position: relative;
+    overflow-y: hidden;
+    z-index: 1001;
     transition: width 0.28s ease;
     background-color: var(--base-menu-background);
     height: 100%;
-    position: relative;
-    font-size: 0px;
-    z-index: 1001;
     display: flex;
     flex-direction: column;
     -webkit-box-shadow: 2px 0 14px rgb(0 21 41 / 10%);
     box-shadow: 2px 0 14px rgb(0 21 41 / 10%);
-    .scrollbar-wrapper {
-      overflow-x: hidden;
-    }
-
-    .el-scrollbar {
-      flex: 1;
-    }
 
     .el-scrollbar__bar.is-vertical {
       right: 0px;
@@ -29,7 +22,10 @@
 
   // 展开sidebar状态设置svg-icon边距
   .openSidebar {
-    .layout-sidebar__container .svg-icon {
+    .sidebar {
+      transform: translate(0);
+    }
+    .sidebar .svg-icon {
       margin-right: 5px;
     }
   }
@@ -76,14 +72,14 @@
       margin-left: 0px;
     }
 
-    .layout-sidebar__container {
+    .sidebar {
       transition: transform 0.28s;
       position: fixed;
-      background: var(--base-menu-background, #fff);
+      // background: var(--base-menu-background, #fff);
     }
 
     &.hideSidebar {
-      .layout-sidebar__container {
+      .sidebar {
         display: none;
       }
     }

src/assets/styles/variables.module.scss

@@ -10,11 +10,6 @@ $panGreen: #30b08f;
 
 // 默认菜单主题风格
 :root {
-  // --base-menu-background: #ffffff;
-  // --base-logo-title-color: #ffffff;
-  // --base-topBar-background: #ffffff;
-  // --base-topBar-color: #5a5e66;
-
   --base-text-color-rgba: rgba(0, 0, 0, 0.85);
   --base-sidebar-width: 220px;
   --el-aside-width: 220px;
@@ -23,16 +18,7 @@ $panGreen: #30b08f;
   --base-header-height: 50px;
 }
 
-/***默认主题颜色配置***/
+/***侧边栏深色配置***/
-[data-theme='theme-light'] {
-  // 菜单背景
-  // --base-menu-background: #ffffff;
-  // // logo部分文字颜色
-  // --base-logo-title-color: #001529;
-  // // 顶部导航栏背景色
-  // --base-topBar-background: #ffffff;
-}
-/***深色主题颜色配置***/
 [data-theme='theme-dark'] {
   --base-menu-background: #304156;
   --base-logo-title-color: #ffffff;

src/layout/components/Sidebar/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-aside :data-theme="sideTheme" class="layout-sidebar__container" :class="{ 'has-logo': showLogo }">
+  <el-aside :data-theme="sideTheme" class="sidebar" :class="{ 'has-logo': showLogo }">
     <logo v-if="showLogo" :collapse="isCollapse" />
 
     <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">

src/layout/index.vue

@@ -1,8 +1,11 @@
 <template>
   <el-container :class="classObj" class="app-layout" :style="{ '--current-color': theme }">
     <!-- 移动端打开菜单遮罩 -->
-    <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
+    <el-drawer v-if="device === 'mobile'" v-model="menuDrawer" :with-header="false" modal-class="sidebar-mobile" direction="ltr">
-    <sidebar v-if="!sidebar.hide" />
+      <sidebar />
+    </el-drawer>
+    <sidebar v-else-if="!sidebar.hide" />
+
     <el-container class="main-container flex-center" :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }">
       <el-header :class="{ 'fixed-header': fixedHeader }">
         <navbar @setLayout="setLayout" />
@@ -30,7 +33,12 @@ import { useWindowSize } from '@vueuse/core'
 import Sidebar from './components/Sidebar/index.vue'
 import { Navbar, Settings, TagsView } from './components'
 import defaultSettings from '@/settings'
-
+const menuDrawer = computed({
+  get: () => store.state.app.sidebar.opened,
+  set: (val) => {
+    store.dispatch('app/toggleSideBar')
+  },
+})
 const store = useStore()
 const theme = computed(() => store.state.settings.theme)
 const sidebar = computed(() => store.state.app.sidebar)
@@ -100,15 +108,7 @@ function setLayout() {
     top: 0;
   }
 }
-// 移动端打开菜单背景遮罩
+
-.drawer-bg {
-  background: rgba(0, 0, 0, 0.3);
-  width: 100%;
-  top: 0;
-  height: 100%;
-  position: absolute;
-  z-index: 999;
-}
 // 固定header
 .fixed-header {
   position: sticky;
@@ -126,6 +126,16 @@ function setLayout() {
   position: relative;
   height: 100%;
 }
+.sidebar-mobile {
+  .el-drawer__body {
+    padding: 0;
+  }
+  @media screen and (max-width: 700px) {
+    .el-drawer {
+      width: var(--base-sidebar-width) !important;
+    }
+  }
+}
 
 .el-header {
   --el-header-padding: 0 0px !important;