refactor: optimize side bar component to make it more friendly (#230)

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;

src/layout/components/SideBar.vue

@@ -13,17 +13,17 @@ 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>
+    <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"
-      :unique-opened="true"
         :collapse="isCollapse"
         :style="{ border: 'none' }"
       >
@@ -31,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' : ''">
@@ -48,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>
@@ -61,14 +61,6 @@ limitations under the License. -->
           </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" />
     </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;
   }

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;
+}