From 4bbdf5ee0e92e910f266a78d8fb3a8b882e9c0c5 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Tue, 12 Mar 2019 11:11:38 +0800
Subject: [PATCH] fix[Sidebar]: fixed collapse animation problem

---
 src/styles/sidebar.scss                       | 20 ++++++++++++++-----
 src/styles/variables.scss                     |  3 ++-
 src/views/layout/components/Sidebar/index.vue |  2 +-
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 96e89be..0344970 100644
--- a/src/styles/sidebar.scss
+++ b/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;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 3bd185f..fb19d5d 100644
--- a/src/styles/variables.scss
+++ b/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;
diff --git a/src/views/layout/components/Sidebar/index.vue b/src/views/layout/components/Sidebar/index.vue
index 467f812..225ee25 100644
--- a/src/views/layout/components/Sidebar/index.vue
+++ b/src/views/layout/components/Sidebar/index.vue
@@ -1,12 +1,12 @@
 <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"/>