Improve sidenav in menu burger icon

cloudfoundry · Apr 26, 2019 · cfd092f · cfd092f
1 parent 82e218d
commit cfd092f
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 9 deletions.
diff --git a/custom-src/frontend/sass/custom/suse.scss b/custom-src/frontend/sass/custom/suse.scss
@@ -61,18 +61,20 @@ $suse-side-nav-active: #003358;
 
 // Use SUSE Blue Side Navigation
 .stratos {
-
+  // This is themeable, we really don't need this.
   .side-nav__inner,
   .side-nav__top,
   .side-nav__item--active:hover {
     background-color: $suse-side-nav;
   }
-
+ 
   .side-nav__item--active,
   .side-nav__item:hover {
     background-color: $suse-side-nav-active;
   }
-
+  .side-nav__top {
+    border-color: $suse-side-nav-active;
+  }
   .side-nav__bottom {
     color: $suse-text-gray;
   }

diff --git a/src/frontend/packages/core/src/features/dashboard/side-nav/side-nav.component.html b/src/frontend/packages/core/src/features/dashboard/side-nav/side-nav.component.html
@@ -6,8 +6,8 @@
           <div class="side-nav__logo-img"></div>
           <div class="side-nav__logo-text">{{ customizations.logoText || '' }}
           </div>
-          <button mat-icon-button (click)="toggleSidenav()">
-            <mat-icon class="side-nav__nav-toggle">menu</mat-icon>
+          <button class="side-nav__nav-toggle" mat-icon-button (click)="toggleSidenav()">
+            <mat-icon class="side-nav__nav-toggle-icon">menu</mat-icon>
           </button>
         </div>
       </div>

diff --git a/src/frontend/packages/core/src/features/dashboard/side-nav/side-nav.component.scss b/src/frontend/packages/core/src/features/dashboard/side-nav/side-nav.component.scss
@@ -1,11 +1,17 @@
-$side-nav-padding-h: 12px;
+$side-nav-padding-h: 18px;
 $side-nav-mat-icon-height: 18px;
 $side-nav-mat-icon-height-large: 24px;
 $side-nav-mat-icon-padding-right: 10px;
-$nav-width: 175px;
+$nav-width: 200px;
 $icon-nav-width: 50px;
 .side-nav {
   height: 100%;
+  &__nav-toggle {
+    margin-left: 10px;
+    &-icon {
+      font-size: 20px;
+    }
+  }
   &__inner {
     display: flex;
     flex-direction: column;
@@ -115,6 +121,9 @@ $transition-delay: .5s;
     transition: 0s opacity, 0s width;
   }
   .side-nav {
+    &__item {
+      padding: 15px 12px;
+    }
     &__inner {
       transition: $transition-time width;
       width: $icon-nav-width;
@@ -128,6 +137,9 @@ $transition-delay: .5s;
     &__top {
       width: $icon-nav-width;
     }
+    &__nav-toggle {
+      margin-left: 0;
+    }
     &__item-icon {
       font-size: $side-nav-mat-icon-height-large;
       height: $side-nav-mat-icon-height-large;

diff --git a/src/frontend/packages/core/src/features/dashboard/side-nav/side-nav.component.theme.scss b/src/frontend/packages/core/src/features/dashboard/side-nav/side-nav.component.theme.scss
@@ -3,7 +3,7 @@
   $primary: map-get($theme, primary);
   $side-nav-colors: map-get($app-theme, side-nav);
   $side-nav-bottom-color: map-get($app-theme, subdued-color);
-
+  $side-nav-hover-color: mat-color($side-nav-colors, hover);
   .side-nav {
     &__nav-toggle {
       color: mat-color($side-nav-colors, text);
@@ -13,12 +13,13 @@
     }
     &__top {
       background-color: mat-color($side-nav-colors, background-top);
+      border-bottom: 1px solid $side-nav-hover-color;
     }
     &__item {
       color: mat-color($side-nav-colors, text);
       transition: color ease .3s;
       &:hover {
-        background-color: mat-color($side-nav-colors, hover);
+        background-color: $side-nav-hover-color;
         color: mat-color($side-nav-colors, hover-text);
       }
       &--active,