refine sidebar

src/styles/element-ui.scss

  //覆盖一些element-ui样式
-.block-checkbox {
-  display: block;
-}
+ .block-checkbox {
+   display: block;
+ }
 
-.operation-container {
-  .cell {
-    padding: 10px !important;
-  }
-  .el-button {
-    &:nth-child(3) {
-      margin-top: 10px;
-      margin-left: 0px;
-    }
-    &:nth-child(4) {
-      margin-top: 10px;
-    }
-  }
-}
+ .operation-container {
+   .cell {
+     padding: 10px !important;
+   }
+   .el-button {
+     &:nth-child(3) {
+       margin-top: 10px;
+       margin-left: 0px;
+     }
+     &:nth-child(4) {
+       margin-top: 10px;
+     }
+   }
+ }
 
-.el-upload {
-  input[type="file"] {
-    display: none !important;
-  }
-}
+ .el-upload {
+   input[type="file"] {
+     display: none !important;
+   }
+ }
 
-.el-upload__input {
-  display: none;
-}
+ .el-upload__input {
+   display: none;
+ }
 
-.cell {
-  .el-tag {
-    margin-right: 8px;
-  }
-}
+ .cell {
+   .el-tag {
+     margin-right: 8px;
+   }
+ }
 
-.small-padding {
-  .cell {
-    padding-left: 8px;
-    padding-right: 8px;
-  }
-}
+ .small-padding {
+   .cell {
+     padding-left: 8px;
+     padding-right: 8px;
+   }
+ }
 
-.status-col {
-  .cell {
-    padding: 0 10px;
-    text-align: center;
-    .el-tag {
-      margin-right: 0px;
-    }
-  }
-}
+ .status-col {
+   .cell {
+     padding: 0 10px;
+     text-align: center;
+     .el-tag {
+       margin-right: 0px;
+     }
+   }
+ }
 
-//暂时性解决diolag 问题 https://github.com/ElemeFE/element/issues/2461
-.el-dialog {
-  transform: none;
-  left: 0;
-  position: relative;
-  margin: 0 auto;
-}
+ //暂时性解决diolag 问题 https://github.com/ElemeFE/element/issues/2461
+ .el-dialog {
+   transform: none;
+   left: 0;
+   position: relative;
+   margin: 0 auto;
+ }
 
+ //文章页textarea修改样式
+ .article-textarea {
+   textarea {
+     padding-right: 40px;
+     resize: none;
+     border: none;
+     border-radius: 0px;
+     border-bottom: 1px solid #bfcbd9;
+   }
+ }
 
-//文章页textarea修改样式
-.article-textarea {
-  textarea {
-    padding-right: 40px;
-    resize: none;
-    border: none;
-    border-radius: 0px;
-    border-bottom: 1px solid #bfcbd9;
-  }
-}
-
-//element ui upload
-.upload-container {
-  .el-upload {
-    width: 100%;
-    .el-upload-dragger {
-      width: 100%;
-      height: 200px;
-    }
-  }
-}
+ //element ui upload
+ .upload-container {
+   .el-upload {
+     width: 100%;
+     .el-upload-dragger {
+       width: 100%;
+       height: 200px;
+     }
+   }
+ }

src/styles/index.scss

+@import './mixin.scss';
 @import './btn.scss';
 @import './element-ui.scss';
-@import './mixin.scss';
+@import './sidebar.scss';
+
 body {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;

src/styles/sidebar.scss

+// 侧边栏
+.sidebar-container>.el-menu {
+  width: 100%!important;
+}
+
+.sidebar-container .svg-icon {
+  margin-right: 16px;
+}
+
+.hideSidebar .svg-icon {
+  margin-right: 0;
+}
+
+.hideSidebar .submenu-title-noDropdown span,
+.hideSidebar .el-submenu>.el-submenu__title span {
+  height: 0;
+  width: 0;
+  overflow: hidden;
+  visibility: hidden;
+  display: inline-block;
+}
+
+.hideSidebar .nest-menu .el-submenu__title {
+  text-align: initial!important;
+  span {
+    height: auto;
+    width: auto;
+    visibility: visible;
+  }
+  .el-submenu__icon-arrow {
+    display: block!important;
+  }
+}
+
+.hideSidebar .menu-wrapper>.el-menu-item,
+.hideSidebar .submenu-title-noDropdown,
+.hideSidebar .menu-wrapper>.el-submenu .el-submenu__title {
+  text-align: center;
+}
+
+.hideSidebar .el-menu-item .el-submenu__icon-arrow,
+.hideSidebar .el-submenu .el-submenu__title .el-submenu__icon-arrow {
+  display: none;
+}
+
+.hideSidebar .submenu-title-noDropdown {
+  position: relative;
+  span {
+    transition: opacity .3s cubic-bezier(.55, 0, .1, 1);
+    opacity: 0;
+  }
+  &:hover {
+    span {
+      display: block;
+      border-radius: 3px;
+      z-index: 1002;
+      width: 140px;
+      height: 56px;
+      visibility: visible;
+      position: absolute;
+      right: -145px;
+      top: 0px;
+      background-color: #1f2d3d;
+      opacity: 1;
+    }
+  }
+}
+
+.el-submenu .el-menu-item {
+  min-width: 180px!important;
+}
+

src/views/layout/Layout.vue

 <template>
 	<div class="app-wrapper" :class="{hideSidebar:!sidebar.opened}">
-		<div class="sidebar-wrapper">
-			<sidebar class="sidebar-container"></sidebar>
-		</div>
+		<sidebar class="sidebar-container"></sidebar>
 		<div class="main-container">
 			<navbar></navbar>
 			<app-main></app-main>
@@ -36,40 +34,36 @@
 		height: 100%;
 		width: 100%;
 		&.hideSidebar {
-			.sidebar-wrapper {
-				transform: translate(-140px, 0);
-				.sidebar-container {
-					transform: translate(132px, 0);
-				}
-				&:hover {
-					transform: translate(0, 0);
-					.sidebar-container {
-						transform: translate(0, 0);
-					}
-				}
+			.sidebar-container{
+				width:56px;
 			}
 			.main-container {
-				margin-left: 40px;
+				margin-left: 56px;
 			}
+			// .sidebar-wrapper {
+			// 	transform: translate(-140px, 0);
+			// 	.sidebar-container {
+			// 		transform: translate(132px, 0);
+			// 	}
+			// 	&:hover {
+			// 		transform: translate(0, 0);
+			// 		.sidebar-container {
+			// 			transform: translate(0, 0);
+			// 		}
+			// 	}
+			// }
+
 		}
-		.sidebar-wrapper {
+		.sidebar-container {
+			transition: all .28s ease-out;
 			width: 180px;
+			height: 1000px;
 			position: fixed;
 			top: 0;
 			bottom: 0;
 			left: 0;
 			z-index: 1001;
-			overflow: hidden;
-			transition: all .28s ease-out;
-		}
-		.sidebar-container {
-			transition: all .28s ease-out;
-			position: absolute;
-			top: 0;
-			bottom: 0;
-			left: 0;
-			right: -17px;
-			overflow-y: scroll;
+			background: red;
 		}
 		.main-container {
 			min-height: 100%;

src/views/layout/Levelbar.vue

 <template>
   <el-breadcrumb class="app-levelbar" separator="/">
-    <el-breadcrumb-item v-for="(item,index)  in levelList" :key="item">
+    <el-breadcrumb-item v-for="(item,index)  in levelList" :key="item.path">
       <router-link v-if='item.redirect==="noredirect"||index==levelList.length-1' to="" class="no-redirect">{{item.name}}</router-link>
       <router-link v-else :to="item.redirect||item.path">{{item.name}}</router-link>
     </el-breadcrumb-item>

src/views/layout/Sidebar.vue

 <template>
-	<el-menu mode="vertical" theme="dark" :default-active="$route.path">
-		<sidebar-item :routes='permission_routers'></sidebar-item>
+<div>
+	<el-menu mode="vertical" theme="dark" :default-active="$route.path" :collapse="isCollapse">
+		 <sidebar-item :routes='permission_routers'></sidebar-item>
 	</el-menu>
+  </div>
 </template>
 
 <script>
@@ -11,8 +13,12 @@
     components: { SidebarItem },
     computed: {
       ...mapGetters([
-        'permission_routers'
-      ])
+        'permission_routers',
+        'sidebar'
+      ]),
+      isCollapse() {
+        return !this.sidebar.opened
+      }
     }
   }
 </script>

src/views/layout/SidebarItem.vue

 <template>
-	<div>
+	<div class='menu-wrapper'>
 		<template v-for="item in routes">
+
 			<router-link v-if="!item.hidden&&item.noDropdown&&item.children.length>0" :to="item.path+'/'+item.children[0].path">
-				<el-menu-item :index="item.path+'/'+item.children[0].path">
-					<icon-svg v-if='item.icon' :icon-class="item.icon"></icon-svg>{{item.children[0].name}}
+				<el-menu-item :index="item.path+'/'+item.children[0].path"  class='submenu-title-noDropdown'>
+					<icon-svg v-if='item.icon' :icon-class="item.icon"></icon-svg><span slot="title">{{item.children[0].name}}</span>
 				</el-menu-item>
 			</router-link>
+
 			<el-submenu :index="item.name" v-if="!item.noDropdown&&!item.hidden">
 				<template slot="title">
-					<icon-svg v-if='item.icon' :icon-class="item.icon"></icon-svg>{{item.name}}
+					<icon-svg v-if='item.icon' :icon-class="item.icon"></icon-svg><span slot="title">{{item.name}}</span>
 				</template>
 				<template v-for="child in item.children" v-if='!child.hidden'>
-					<sidebar-item class='menu-indent' v-if='child.children&&child.children.length>0' :routes='[child]'> </sidebar-item>
-					<router-link v-else class="menu-indent" :to="item.path+'/'+child.path">
+
+					<sidebar-item class='nest-menu' v-if='child.children&&child.children.length>0' :routes='[child]'> </sidebar-item>
+
+					<router-link v-else :to="item.path+'/'+child.path">
 						<el-menu-item :index="item.path+'/'+child.path">
-							{{child.name}}
+							<span slot="title">{{child.name}}</span>
 						</el-menu-item>
 					</router-link>
+
 				</template>
+
 			</el-submenu>
+
 		</template>
 	</div>
 </template>
@@ -35,13 +42,6 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-	.svg-icon {
-		margin-right: 15px;
-	}
-
-	.hideSidebar .menu-indent {
-		display: block;
-		text-indent: 10px;
-	}
+
 </style>