From d87f5a0cfde1c079024233fd3399a4b3827fc13c Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Thu, 9 Feb 2023 17:18:39 +0800
Subject: [PATCH] feat: update menus

---
 src/layout/components/NavBar.vue  |  2 +-
 src/layout/components/SideBar.vue | 28 ++++++++++------------------
 2 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue
index d50cc283..ed12ee10 100644
--- a/src/layout/components/NavBar.vue
+++ b/src/layout/components/NavBar.vue
@@ -101,7 +101,7 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .nav-bar {
-    padding: 5px 10px 5px 28px;
+    padding: 5px 10px;
     text-align: left;
     justify-content: space-between;
     background-color: #fafbfc;
diff --git a/src/layout/components/SideBar.vue b/src/layout/components/SideBar.vue
index b5694fd0..af7028a7 100644
--- a/src/layout/components/SideBar.vue
+++ b/src/layout/components/SideBar.vue
@@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <div class="side-bar" v-if="showMenu">
+  <div class="side-bar" v-if="showMenu" @click="setCollapse" @mouseleave="closeMenu">
     <div :class="isCollapse ? 'logo-icon-collapse' : 'logo-icon'">
       <Icon :size="isCollapse ? 'xl' : 'logo'" :iconName="isCollapse ? 'logo' : 'logo-sw'" />
     </div>
@@ -24,7 +24,6 @@ limitations under the License. -->
         class="el-menu-vertical"
         :default-active="name"
         text-color="#efefef"
-        :unique-opened="true"
         :collapse="isCollapse"
         :style="{ border: 'none' }"
       >
@@ -32,7 +31,7 @@ limitations under the License. -->
           <el-sub-menu :index="String(menu.name)" v-if="menu.meta.hasGroup">
             <template #title>
               <router-link class="items" :to="menu.path">
-                <el-icon class="menu-icons" :style="{ marginRight: '12px' }">
+                <el-icon class="menu-icons" :style="{ marginRight: '12px' }" @mouseover="setCollapse">
                   <Icon size="lg" :iconName="menu.meta.icon" />
                 </el-icon>
                 <span class="title" :class="isCollapse ? 'collapse' : ''">
@@ -49,7 +48,7 @@ limitations under the License. -->
             </el-menu-item-group>
           </el-sub-menu>
           <el-menu-item :index="String(menu.name)" @click="changePage(menu)" v-else>
-            <el-icon class="menu-icons" :style="{ marginRight: '12px' }">
+            <el-icon class="menu-icons" :style="{ marginRight: '12px' }" @mouseover="setCollapse">
               <router-link class="items" :to="menu.children[0].path">
                 <Icon size="lg" :iconName="menu.meta.icon" />
               </router-link>
@@ -63,15 +62,6 @@ limitations under the License. -->
         </template>
       </el-menu>
     </div>
-    <div
-      class="menu-control"
-      :class="isCollapse ? 'collapse' : ''"
-      :style="{
-        color: theme === 'light' ? '#eee' : '#252a2f',
-      }"
-    >
-      <Icon size="middle" iconName="format_indent_decrease" @click="controlMenu" />
-    </div>
   </div>
 </template>
 
@@ -89,7 +79,7 @@ limitations under the License. -->
   const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "") ? ref("light") : ref("black");
   const routes = ref<RouteRecordRaw[] | any>(useRouter().options.routes);
   const route = useRoute();
-  const isCollapse = ref(false);
+  const isCollapse = ref(true);
   const showMenu = ref(true);
 
   if (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) {
@@ -100,15 +90,18 @@ limitations under the License. -->
   if (route.name === "ViewWidget") {
     showMenu.value = false;
   }
-  const controlMenu = () => {
-    isCollapse.value = !isCollapse.value;
-  };
   const changePage = (menu: RouteRecordRaw) => {
     theme.value = ["VirtualMachine", "Kubernetes"].includes(String(menu.name)) ? "light" : "black";
   };
   const filterMenus = (menus: any[]) => {
     return menus.filter((d) => d.meta && !d.meta.notShow);
   };
+  function setCollapse() {
+    isCollapse.value = false;
+  }
+  function closeMenu() {
+    isCollapse.value = true;
+  }
 </script>
 
 <style lang="scss" scoped>
@@ -126,7 +119,6 @@ limitations under the License. -->
 
   .menu:hover {
     overflow-y: auto;
-    overflow-x: hidden;
   }
 
   .el-menu-vertical:not(.el-menu--collapse) {