perf: 调整菜单样式

src/components/Hamburger/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="padding: 0 15px;" @click="toggleClick">
+  <div style="padding: 0 20px;" @click="toggleClick">
     <svg-icon icon-class="arrow-to-left" class="hamburger" style="color: #ffffff;" :class="{'is-active':isActive}" />
   </div>
 </template>

src/layout/components/NavLeft/index.vue

@@ -178,6 +178,9 @@ export default {
     width: 100%;
     height: 48px;
     line-height: 48px;
+    margin-top: 2px;
+    box-sizing: border-box;
+    border-top: 1px solid rgba(31, 35, 41, 0.15);
     background-color: $subMenuBg;
 
     .toggle-bar {
@@ -195,12 +198,6 @@ export default {
     .toggle-bar:hover {
       background-color: $subMenuHover;
     }
-
-    .hamburger-container {
-      left: 2px;
-      top: 10px;
-      position: absolute;
-    }
   }
   .active-mobile {
     display: none;

src/router/profile/index.js

@@ -7,7 +7,7 @@ export default {
   component: Layout,
   meta: {
     title: i18n.t('route.UserProfile'),
-    icon: 'gear',
+    icon: 'personal',
     view: 'profile',
     type: 'view',
     showNavSwitcher: false,
@@ -21,7 +21,7 @@ export default {
       component: () => import('@/views/profile/ProfileInfo'),
       meta: {
         title: i18n.t('users.AccountInformation'),
-        icon: 'adjust',
+        icon: 'attestation',
         permissions: []
       }
     },
@@ -31,7 +31,7 @@ export default {
       component: () => import('@/views/profile/ProfileUpdate/index'),
       meta: {
         title: i18n.t('users.Profile'),
-        icon: 'user-circle',
+        icon: 'personal',
         permissions: []
       }
     },
@@ -72,7 +72,7 @@ export default {
       name: 'ConnectionToken',
       meta: {
         title: i18n.t('common.nav.ConnectionToken'),
-        icon: 'map-pin',
+        icon: 'token',
         permissions: ['authentication.view_connectiontoken']
       }
     }

src/styles/menu.scss

@@ -24,10 +24,11 @@
     color: $menuText;
     &.is-active{
       color: $subMenuActiveText;
+      background-color: $subMenuHover!important;
     }
     &:hover {
       background-color: $subMenuHover;
-      color: $--color-primary;
+      color: $subMenuActiveText;
     }
     i {
       color: $menuText;
@@ -44,8 +45,8 @@
   }
 
   .el-submenu .el-menu-item {
-    height: 48px;
-    line-height: 48px;
+    height: 38px;
+    line-height: 38px;
     padding: 0 52px;
     min-width: 200px;
   }
@@ -65,7 +66,7 @@
     height: 48px;
     line-height: 48px;
     font-weight: 400;
-    font-size: 14px;
+    font-size: 13px;
   }
 
   .el-menu-item:hover, .el-menu-item:focus {
@@ -81,7 +82,7 @@
   }
 
   li.is-active {
-    border-left: 4px solid $menuActiveLeft;
+    // border-left: 4px solid $menuActiveLeft;
   }
 
   .el-submenu-sidebar .el-menu-item {

src/styles/sidebar.scss

@@ -19,6 +19,7 @@
     left: 0;
     z-index: 1001;
     overflow: hidden;
+    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
 
     // reset element-ui css
     .horizontal-collapse-transition {
@@ -79,7 +80,7 @@
     & .nest-menu .el-submenu-sidebar>.el-submenu__title,
     & .el-submenu-sidebar .el-menu-item {
       min-width: $sideBarWidth !important;
-      background-color: $subMenuBg !important;
+      background-color: $subMenuBg;
 
       &:hover {
         background-color: $subMenuHover !important;