refine sidebar

src/styles/element-ui.scss

@@ -59,7 +59,6 @@
    margin: 0 auto;
  }
 
-
  //文章页textarea修改样式
  .article-textarea {
    textarea {

src/styles/index.scss

@@ -1,6 +1,8 @@
+@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

@@ -0,0 +1,72 @@
+// 侧边栏
+.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

@@ -1,8 +1,6 @@
 <template>
 	<div class="app-wrapper" :class="{hideSidebar:!sidebar.opened}">
-		<div class="sidebar-wrapper">
 		<sidebar class="sidebar-container"></sidebar>
-		</div>
 		<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);
+				width:56px;
-				}
-				&:hover {
-					transform: translate(0, 0);
-					.sidebar-container {
-						transform: translate(0, 0);
-					}
-				}
 			}
 			.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;
+			background: red;
-			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;
 		}
 		.main-container {
 			min-height: 100%;

src/views/layout/Levelbar.vue

@@ -1,6 +1,6 @@
 <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

@@ -1,7 +1,9 @@
 <template>
-	<el-menu mode="vertical" theme="dark" :default-active="$route.path">
+<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

@@ -1,24 +1,31 @@
 <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">
+				<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>{{item.children[0].name}}
+					<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>