feat(*): 左侧菜单栏增加折叠

src/components/Hamburger/index.vue

+<template >
+  <div class="hamburger" @click="toggleClick">
+    <svg
+        :class="{'is-active':isActive}"
+        class="hamburger-icon"
+        viewBox="0 0 1024 1024"
+        xmlns="http://www.w3.org/2000/svg"
+        width="64"
+        height="64"
+    >
+      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
+    </svg>
+  </div>
+</template>
+
+
+<script setup>
+import { ref, defineProps,defineEmits } from 'vue';
+const emit = defineEmits(['toggleClick']);
+
+const props = defineProps({
+  isActive: {
+    type: Boolean,
+    default: false
+  },
+});
+
+const toggleClick = ()=>{
+  emit('toggleClick');
+}
+</script>
+
+<style scoped lang="scss">
+.hamburger {
+  padding: 0 15px;
+  .hamburger-icon {
+    display: inline-block;
+    vertical-align: middle;
+    width: 20px;
+    height: 20px;
+  }
+  .is-active {
+    transform: rotate(180deg);
+  }
+}
+</style>
\ No newline at end of file

src/layout/menuCom.vue

@@ -5,6 +5,8 @@
         class="el-menu-vertical-demo"
         @open="handleOpen"
         @close="handleClose"
+        :collapse="sidebar"
+        :collapse-transition="false"
       >
         <template v-for="(item, index) in routerList" :key="item.path">
           <el-sub-menu
@@ -16,14 +18,22 @@
               <el-icon><location /></el-icon>
               <span>{{getMenuTitle(item)}}</span>
             </template>
-              <el-menu-item v-for="(item_son, index_son) in item.children" :key="item_son.path" :index="index + '_' + index_son"
-              @click="handleClick(item_son.path)">
+              <el-menu-item v-for="(item_son, index_son) in item.children"
+                            :key="item_son.path"
+                            :index="index + '_' + index_son"
+                            @click="handleClick(item_son.path)"
+                            class="submenu-title-noDropdown"
+              >
                 <span>{{getMenuTitle(item_son)}}</span>
-                <!-- <router-link :to="item.path + '/' + item_son.path">{{getMenuTitle(item_son)}}</router-link> -->
               </el-menu-item>
           </el-sub-menu>
-          <el-menu-item v-else :index="index + ''"  class="submenu-box"  @click="handleClick(item.path)">
-            <el-icon><setting /></el-icon>
+          <el-menu-item v-else :index="index + ''"
+                        class="submenu-box"
+                        @click="handleClick(item.path)"
+          >
+            <el-icon>
+              <setting />
+            </el-icon>
             <span>{{getMenuTitle(item)}}</span>
           </el-menu-item>
         </template>
@@ -41,9 +51,10 @@ import {
 } from "@element-plus/icons-vue";
 import {routes} from "../router/index.js";
 import { useRouter } from 'vue-router'
-
-const router = useRouter()
-
+import { menuStore } from '@/pinia/menu.js';
+import { storeToRefs } from 'pinia';
+const router = useRouter();
+const { sidebar } = storeToRefs(menuStore());
 const handleClick = (path) => {
   console.log(path);
   if (path.startsWith('/')) {
@@ -106,4 +117,14 @@ const getMenuTitle = (item) => {
     color: #fff !important;
   }
 }
+
+// menu hover
+.submenu-title-noDropdown,
+.el-submenu__title {
+  background: transparent;
+  color: #FFFFFF !important;
+  &:hover {
+    background-color: #03a1b3 !important;
+  }
+}
 </style>
\ No newline at end of file

src/pinia/index.js

 //创娃store很简单，调用pinia中的definestore函数即可，该函数族收两个参数:
 import {defineStore} from 'pinia'
-import user from './user'
+import user from './user';
+import menu from './menu';
 console.log(user.actions)
 
 //第一个参敬是应用程序中store的唯一id,就是给数据仓库起个名字
@@ -11,3 +12,8 @@ export const useUsersStore = defineStore('user',{
      state: user.state,
      actions: user.actions,
 })
+
+export const menuStore = defineStore('menu',{
+     state: menu.state,
+     actions: menu.actions,
+})

src/pinia/menu.js

+import { defineStore } from 'pinia';
+
+export const menuStore = defineStore('menu',{
+    state: ()=>{
+        return {
+            sidebar: false,
+        }
+    },
+    actions: {
+        toggleSideBar() {
+            this.sidebar = !this.sidebar;
+        },
+    }
+})
\ No newline at end of file