From 187777672049594fd8f5ebf18ad93fb5dccd75d0 Mon Sep 17 00:00:00 2001
From: Fine0830 <fanxue0830@gmail.com>
Date: Thu, 9 Feb 2023 17:54:11 +0800
Subject: [PATCH] refactor: optimize side bar component to make it more
 friendly (#230)

---
 src/layout/components/NavBar.vue  |   2 +-
 src/layout/components/SideBar.vue | 128 ++++++++++++++----------------
 src/router/data/aws.ts            |   2 +-
 src/styles/lib.scss               |  18 +++++
 4 files changed, 79 insertions(+), 71 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 d27c2db0..77ebdce8 100644
--- a/src/layout/components/SideBar.vue
+++ b/src/layout/components/SideBar.vue
@@ -13,62 +13,54 @@ 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="isCollapse = false" @mouseleave="isCollapse = true">
     <div :class="isCollapse ? 'logo-icon-collapse' : 'logo-icon'">
       <Icon :size="isCollapse ? 'xl' : 'logo'" :iconName="isCollapse ? 'logo' : 'logo-sw'" />
     </div>
-    <el-menu
-      active-text-color="#448dfe"
-      background-color="#252a2f"
-      class="el-menu-vertical"
-      :default-active="name"
-      text-color="#efefef"
-      :unique-opened="true"
-      :collapse="isCollapse"
-      :style="{ border: 'none' }"
-    >
-      <template v-for="(menu, index) in routes" :key="index">
-        <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' }">
-                <Icon size="lg" :iconName="menu.meta.icon" />
-              </el-icon>
-              <span class="title" :class="isCollapse ? 'collapse' : ''">
-                {{ t(menu.meta.title) }}
-              </span>
-            </router-link>
-          </template>
-          <el-menu-item-group>
-            <el-menu-item v-for="(m, idx) in filterMenus(menu.children)" :index="m.name" :key="idx">
-              <router-link class="items" :to="m.path">
-                <span class="title">{{ m.meta && t(m.meta.title) }}</span>
+    <div class="menu scroll_bar_dark" :style="isCollapse ? {} : { width: '220px' }">
+      <el-menu
+        active-text-color="#448dfe"
+        background-color="#252a2f"
+        class="el-menu-vertical"
+        :default-active="name"
+        text-color="#efefef"
+        :collapse="isCollapse"
+        :style="{ border: 'none' }"
+      >
+        <template v-for="(menu, index) in routes" :key="index">
+          <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' }" @mouseover="setCollapse">
+                  <Icon size="lg" :iconName="menu.meta.icon" />
+                </el-icon>
+                <span class="title" :class="isCollapse ? 'collapse' : ''">
+                  {{ t(menu.meta.title) }}
+                </span>
               </router-link>
-            </el-menu-item>
-          </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' }">
-            <router-link class="items" :to="menu.children[0].path">
-              <Icon size="lg" :iconName="menu.meta.icon" />
-            </router-link>
-          </el-icon>
-          <template #title>
-            <router-link class="items" :to="menu.children[0].path">
-              <span class="title">{{ t(menu.meta.title) }}</span>
-            </router-link>
-          </template>
-        </el-menu-item>
-      </template>
-    </el-menu>
-    <div
-      class="menu-control"
-      :class="isCollapse ? 'collapse' : ''"
-      :style="{
-        color: theme === 'light' ? '#eee' : '#252a2f',
-      }"
-    >
-      <Icon size="middle" iconName="format_indent_decrease" @click="controlMenu" />
+            </template>
+            <el-menu-item-group>
+              <el-menu-item v-for="(m, idx) in filterMenus(menu.children)" :index="m.name" :key="idx">
+                <router-link class="items" :to="m.path">
+                  <span class="title">{{ m.meta && t(m.meta.title) }}</span>
+                </router-link>
+              </el-menu-item>
+            </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' }" @mouseover="setCollapse">
+              <router-link class="items" :to="menu.children[0].path">
+                <Icon size="lg" :iconName="menu.meta.icon" />
+              </router-link>
+            </el-icon>
+            <template #title>
+              <router-link class="items" :to="menu.children[0].path">
+                <span class="title">{{ t(menu.meta.title) }}</span>
+              </router-link>
+            </template>
+          </el-menu-item>
+        </template>
+      </el-menu>
     </div>
   </div>
 </template>
@@ -87,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)) {
@@ -98,29 +90,37 @@ 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;
+  }
 </script>
 
 <style lang="scss" scoped>
   .side-bar {
     background: #252a2f;
     height: 100%;
-    margin-bottom: 100px;
+    overflow: hidden;
+    margin-bottom: 180px;
+  }
+
+  .menu {
+    height: calc(100% - 30px);
+    overflow: hidden;
+  }
+
+  .menu:hover {
     overflow-y: auto;
-    overflow-x: hidden;
   }
 
   .el-menu-vertical:not(.el-menu--collapse) {
     width: 220px;
-    font-size: 16px;
+    font-size: 14px;
   }
 
   .logo-icon-collapse {
@@ -142,16 +142,6 @@ limitations under the License. -->
     width: 110px;
   }
 
-  .menu-control {
-    position: absolute;
-    top: 7px;
-    left: 220px;
-    cursor: pointer;
-    transition: all 0.2s linear;
-    z-index: 99;
-    color: #252a2f;
-  }
-
   .menu-control.collapse {
     left: 70px;
   }
diff --git a/src/router/data/aws.ts b/src/router/data/aws.ts
index c74ee58b..d88852b8 100644
--- a/src/router/data/aws.ts
+++ b/src/router/data/aws.ts
@@ -57,7 +57,7 @@ export default [
           notShow: true,
           layer: "AWS_S3",
         },
-      },      
+      },
     ],
   },
 ];
diff --git a/src/styles/lib.scss b/src/styles/lib.scss
index fd7ebbf6..d0c1ecbe 100644
--- a/src/styles/lib.scss
+++ b/src/styles/lib.scss
@@ -197,3 +197,21 @@
   box-shadow: inset 0 0 6px #ccc;
   background-color: #aaa;
 }
+
+.scroll_bar_dark::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  background-color: #666;
+}
+
+.scroll_bar_dark::-webkit-scrollbar-track {
+  background-color: #252a2f;
+  border-radius: 3px;
+  box-shadow: inset 0 0 6px #999;
+}
+
+.scroll_bar_dark::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+  box-shadow: inset 0 0 6px #888;
+  background-color: #999;
+}