fix[Sidebar]: fixed collapse animation problem

src/styles/sidebar.scss

@@ -83,19 +83,26 @@
 
   .hideSidebar {
     .sidebar-container {
-      width: 36px !important;
+      width: 54px !important;
     }
 
     .main-container {
-      margin-left: 36px;
+      margin-left: 54px;
+    }
+
+    .svg-icon {
+      margin-right: 0px;
     }
 
     .submenu-title-noDropdown {
-      padding-left: 10px !important;
+      padding: 0 !important;
       position: relative;
 
       .el-tooltip {
-        padding: 0 10px !important;
+        padding: 0 !important;
+        .svg-icon {
+          margin-left: 20px;
+        }
       }
     }
 
@@ -103,7 +110,10 @@
       overflow: hidden;
 
       &>.el-submenu__title {
-        padding-left: 10px !important;
+        padding: 0 !important;
+        .svg-icon {
+          margin-left: 20px;
+        }
 
         .el-submenu__icon-arrow {
           display: none;

src/styles/variables.scss

@@ -9,9 +9,10 @@ $menuHover:#263445;
 $subMenuBg:#1f2d3d;
 $subMenuHover:#001528;
 
-$sideBarWidth: 180px;
+$sideBarWidth: 210px;
 
 // the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
 :export {
   menuText: $menuText;
   menuActiveText: $menuActiveText;

src/views/layout/components/Sidebar/index.vue

 <template>
   <el-scrollbar wrap-class="scrollbar-wrapper">
     <el-menu
-      :show-timeout="200"
       :default-active="$route.path"
       :collapse="isCollapse"
       :background-color="variables.menuBg"
       :text-color="variables.menuText"
       :active-text-color="variables.menuActiveText"
+      :collapse-transition="false"
       mode="vertical"
     >
       <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path"/>