refine sidebar

src/styles/element-ui.scss

@@ -1,83 +1,82 @@
  //覆盖一些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

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