fix: 混合模式样式完善

Former-commit-id: e75ca92650f09791eae18325bf2da11f9a216fab

src/layout/index.vue

@@ -70,6 +70,10 @@ watchEffect(() => {
 function handleOutsideClick() {
   appStore.closeSideBar(false);
 }
+
+function toggleSideBar() {
+  appStore.toggleSidebar(true);
+}
 </script>
 
 <template>
@@ -86,7 +90,15 @@ function handleOutsideClick() {
       <div class="mix-wrap">
         <!-- :menu-list="mixLeftMenu -->
         <!-- :menu-list="permissionStore.routes -->
-        <LeftMenu :menu-list="mixLeftMenu" :base-path="activeTopMenu" />
+        <div class="left-wrap">
+          <LeftMenu :menu-list="mixLeftMenu" :base-path="activeTopMenu" />
+          <div class="menu-action">
+            <hamburger
+              :is-active="appStore.sidebar.opened"
+              @toggle-click="toggleSideBar"
+            />
+          </div>
+        </div>
         <Main />
       </div>
     </template>
@@ -175,8 +187,35 @@ function handleOutsideClick() {
 
   .mix-wrap {
     display: flex;
+    height: 100%;
     padding-top: 50px;
 
+    .left-wrap {
+      position: relative;
+      height: 100%;
+
+      .el-menu {
+        height: 100%;
+      }
+
+      .menu-action {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        height: 50px;
+        line-height: 50px;
+        box-shadow: 0 0 6px -2px var(--el-color-primary);
+
+        div:hover {
+          background-color: var(--menuBg);
+        }
+
+        :deep(svg) {
+          color: #409eff !important;
+        }
+      }
+    }
+
     .main-container {
       flex: 1;
       min-width: 0;