Set sidenav to Icon and full mode only

cloudfoundry · Apr 25, 2019 · 9b91a8a · 9b91a8a
1 parent c2ce654
commit 9b91a8a
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 49 deletions.
diff --git a/...rontend/packages/core/src/features/dashboard/dashboard-base/dashboard-base.component.html b/...rontend/packages/core/src/features/dashboard/dashboard-base/dashboard-base.component.html
@@ -1,5 +1,5 @@
 <div class="dashboard__outer">
-  <mat-drawer-container class="dashboard">
+  <mat-drawer-container autosize class="dashboard">
     <mat-drawer #sidenav *ngIf="mainNavState$ | async as navState" class="dashboard__side-nav" [mode]="navState.mode"
       [opened]="navState.opened">
       <app-side-nav (changedMode)="redrawSideNav()" [iconMode]="navState.iconMode" [tabs]="sideNavTabs">

diff --git a/src/frontend/packages/core/src/features/dashboard/dashboard-base/dashboard-base.component.ts b/src/frontend/packages/core/src/features/dashboard/dashboard-base/dashboard-base.component.ts
@@ -74,8 +74,8 @@ export class DashboardBaseComponent implements OnInit, OnDestroy {
         } else {
           return {
             mode: state.sideNavPinned ? 'side' : 'over',
-            opened: state.sidenavOpen || false,
-            iconMode: state.sideNavPinned
+            opened: true,
+            iconMode: !state.sidenavOpen
           };
         }
       })

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
@@ -12,7 +12,8 @@
     </div>
     <ul class="side-nav__items">
       <li *ngFor="let tab of tabs">
-        <a *ngIf="!tab.hidden || !(tab.hidden | async)" class="side-nav__item" [routerLink]="[tab.link]"
+        <a *ngIf="!tab.hidden || !(tab.hidden | async)" [matTooltip]="tab.label" matTooltipPosition="right"
+          [matTooltipDisabled]="!iconMode" class="side-nav__item" [routerLink]="[tab.link]"
           [routerLinkActive]="['side-nav__item--active']">
           <mat-icon class="side-nav__item-icon" [fontSet]="tab.matIconFont">{{ tab.matIcon }}</mat-icon> <span
             class="side-nav__item-label">{{ tab.label }}</span>

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
@@ -103,6 +103,9 @@ $icon-nav-width: 50px;
     opacity: 1;
     white-space: nowrap;
   }
+  &__copyright-icon {
+    width: 0;
+  }
 }
 $transition-time: .2s;
 $transition-delay: .5s;
@@ -129,52 +132,75 @@ $transition-delay: .5s;
     &__top-inner {
       overflow-x: hidden;
     }
-  }
-  &:hover {
-    overflow: visible;
-    .side-nav {
-      &__inner {
-        position: fixed;
-        transition-delay: $transition-delay;
-        width: $nav-width;
-      }
-      &,
-      &__top,
-      &__item-icon,
-      &__item-label,
-      &__copyright,
-      &__logo-img,
-      &__copyright-icon,
-      &__logo-icon-img {
-        transition-delay: $transition-delay;
-      }
-      &__copyright-icon {
-        width: 0;
-      }
+    &__top {
+      width: $icon-nav-width;
     }
-  }
-  &:not(:hover) {
-    .side-nav {
-      &__top {
-        width: $icon-nav-width;
-      }
-      &__item-icon {
-        font-size: $side-nav-mat-icon-height-large;
-        height: $side-nav-mat-icon-height-large;
-        margin-right: 0;
-        width: $side-nav-mat-icon-height-large;
-      }
-      &__item-label,
-      &__copyright  {
-        opacity: 0;
-      }
-      &__logo-img {
-        width: 0;
-      }
-      &__copyright-icon,
-      &__logo-icon-img {
-        opacity: 1;
-      }
+    &__item-icon {
+      font-size: $side-nav-mat-icon-height-large;
+      height: $side-nav-mat-icon-height-large;
+      margin-right: 0;
+      width: $side-nav-mat-icon-height-large;
+    }
+    &__item-label,
+    &__copyright  {
+      opacity: 0;
+    }
+    &__logo-img {
+      width: 0;
+    }
+    &__copyright-icon,
+    &__logo-icon-img {
+      opacity: 1;
+    }
+    &__copyright-icon {
+      width: auto;
     }
   }
+  // &:hover {
+  //   overflow: visible;
+  //   .side-nav {
+  //     &__inner {
+  //       position: fixed;
+  //       transition-delay: $transition-delay;
+  //       width: $nav-width;
+  //     }
+  //     &,
+  //     &__top,
+  //     &__item-icon,
+  //     &__item-label,
+  //     &__copyright,
+  //     &__logo-img,
+  //     &__copyright-icon,
+  //     &__logo-icon-img {
+  //       transition-delay: $transition-delay;
+  //     }
+  //     &__copyright-icon {
+  //       width: 0;
+  //     }
+  //   }
+  // }
+  // &:not(:hover) {
+  //   .side-nav {
+  //     &__top {
+  //       width: $icon-nav-width;
+  //     }
+  //     &__item-icon {
+  //       font-size: $side-nav-mat-icon-height-large;
+  //       height: $side-nav-mat-icon-height-large;
+  //       margin-right: 0;
+  //       width: $side-nav-mat-icon-height-large;
+  //     }
+  //     &__item-label,
+  //     &__copyright  {
+  //       opacity: 0;
+  //     }
+  //     &__logo-img {
+  //       width: 0;
+  //     }
+  //     &__copyright-icon,
+  //     &__logo-icon-img {
+  //       opacity: 1;
+  //     }
+  //   }
+  // }
 }