Add possibility to collapse sidenav (#2004)

* fix nodes list

* collapse sidenav

* fix test

* hide button if sidebar is not visible

* add background-color

* use View enum

Author: kgroschoff

src/app/core/components/navigation/navigation.component.html

@@ -2,6 +2,12 @@
   <div fxLayout
        class="km-navbar"
        fxLayoutAlign=" center">
+    <button mat-icon-button
+            fxLayoutAlign="center center"
+            *ngIf="showCollapseIcon"
+            (click)="collapseSidenav()">
+      <i class="km-icon-mask km-icon-collapse-menu"></i>
+    </button>
     <a class="km-header-logo"
        routerLink="projects"></a>
     <div fxFlex></div>

src/app/core/components/navigation/navigation.component.scss

@@ -9,6 +9,7 @@ header {
 }
 
 .km-navbar {
+  padding-left: 3 * $baseline-grid;
   height: $toolbar-height;
   position: fixed;
   width: 100%;

src/app/core/components/navigation/navigation.component.spec.ts

@@ -9,8 +9,10 @@ import {RouterTestingModule} from '@angular/router/testing';
 import {SharedModule} from '../../../shared/shared.module';
 import {AuthMockService} from '../../../testing/services/auth-mock.service';
 import {ProjectMockService} from '../../../testing/services/project-mock.service';
+import {SettingsMockService} from '../../../testing/services/settings-mock.service';
 import {UserMockService} from '../../../testing/services/user-mock.service';
 import {Auth, ProjectService, UserService} from '../../services/index';
+import {SettingsService} from '../../services/settings/settings.service';
 import {NotificationPanelComponent} from '../notification-panel/notification-panel.component';
 
 import {NavigationComponent} from './navigation.component';
@@ -43,6 +45,7 @@ describe('NavigationComponent', () => {
             {provide: UserService, useClass: UserMockService},
             {provide: ProjectService, useClass: ProjectMockService},
             {provide: Auth, useClass: AuthMockService},
+            {provide: SettingsService, useClass: SettingsMockService},
           ],
         })
         .compileComponents();

src/app/core/components/navigation/navigation.component.ts

@@ -1,23 +1,43 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 import {Router} from '@angular/router';
+import {Subject} from 'rxjs';
+import {switchMap, takeUntil} from 'rxjs/operators';
+
 import {MemberEntity} from '../../../shared/entity/MemberEntity';
 import {Auth, UserService} from '../../services';
+import {SettingsService} from '../../services/settings/settings.service';
 
 @Component({
   selector: 'kubermatic-navigation',
   templateUrl: './navigation.component.html',
   styleUrls: ['./navigation.component.scss'],
 })
 export class NavigationComponent implements OnInit {
+  @Input() showCollapseIcon: boolean;
   currentUser: MemberEntity;
+  showSidenav = true;
+  private _settingsChange = new Subject<void>();
+  private _unsubscribe: Subject<any> = new Subject();
 
   constructor(
-      private readonly _auth: Auth, private readonly _router: Router, private readonly _userService: UserService) {}
+      private readonly _auth: Auth, private readonly _router: Router, private readonly _userService: UserService,
+      private _settingsService: SettingsService) {}
 
   ngOnInit(): void {
     if (this._auth.authenticated()) {
       this._userService.loggedInUser.subscribe(user => this.currentUser = user);
     }
+
+    this._settingsService.userSettings.pipe(takeUntil(this._unsubscribe)).subscribe(settings => {
+      this.showSidenav = !settings.collapseSidenav;
+    });
+
+    this._settingsChange.pipe(takeUntil(this._unsubscribe))
+        .pipe(switchMap(() => this._settingsService.patchUserSettings({'collapseSidenav': !this.showSidenav})))
+        .subscribe(settings => {
+          this._settingsService.refreshUserSettings();
+          this.showSidenav = !settings.collapseSidenav;
+        });
   }
 
   isAuthenticated(): boolean {
@@ -49,4 +69,9 @@ export class NavigationComponent implements OnInit {
   goToAdminPanel(): void {
     this._router.navigate(['settings']);
   }
+
+  collapseSidenav(): void {
+    this.showSidenav = !this.showSidenav;
+    this._settingsChange.next();
+  }
 }

src/app/core/components/sidenav/project/selector.component.html

@@ -1,7 +1,7 @@
 <mat-list-item class="km-project-selector"
                (click)="openDropdown(select)">
-  <div class="km-projects-container">
-    <mat-label>Project</mat-label>
+  <div [ngClass]="showSidenav ? 'km-projects-container' : 'km-projects-container km-collapse-sidenav'">
+    <mat-label *ngIf="showSidenav">Project</mat-label>
     <mat-select #select
                 placeholder="None"
                 class="km-projects-select"

src/app/core/components/sidenav/project/selector.component.scss

@@ -43,4 +43,23 @@ a {
     font-size: $font-size-caption;
     line-height: $font-size-caption;
   }
+
+  &.km-collapse-sidenav {
+    padding: 0 !important;
+    height: 100%;
+
+    mat-select {
+      height: 100%;
+    }
+
+    i {
+      height: 100%;
+      top: 0;
+    }
+
+    .mat-select-placeholder,
+    .mat-select-value-text {
+      display: none;
+    }
+  }
 }

src/app/core/components/sidenav/project/selector.component.ts

@@ -1,7 +1,8 @@
-import {Component, OnDestroy, OnInit} from '@angular/core';
+import {Component, Input, OnDestroy, OnInit} from '@angular/core';
 import {MatSelect, MatSelectChange} from '@angular/material/select';
 import {Subject} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
+
 import {ProjectEntity} from '../../../../shared/entity/ProjectEntity';
 import {ProjectService} from '../../../services';
 
@@ -12,6 +13,7 @@ import {ProjectService} from '../../../services';
 })
 
 export class ProjectSelectorComponent implements OnInit, OnDestroy {
+  @Input() showSidenav: boolean;
   projects: ProjectEntity[];
   selectedProject: ProjectEntity;
 

src/app/core/components/sidenav/sidenav.component.html

@@ -1,8 +1,9 @@
 <div class="km-sidenav"
-     fxLayout="column">
+     fxLayout="column"
+     [ngClass]="!showSidenav ? 'km-collapse-sidenav' : ''">
   <mat-nav-list>
     <div class="km-sidenav-top">
-      <km-project-selector></km-project-selector>
+      <km-project-selector [showSidenav]="showSidenav"></km-project-selector>
 
       <div [matTooltip]="getTooltip('clusters')">
         <mat-list-item [ngClass]="getMenuItemClass('clusters')">
@@ -11,7 +12,9 @@
              fxLayoutAlign=" center"
              [routerLink]="getRouterLink('clusters')"
              [ngClass]="getLinkClass('clusters')">
-            <i class="km-icon-cluster"></i> Clusters</a>
+            <i class="km-icon-cluster"></i>
+            <span *ngIf="showSidenav"> Clusters</span>
+          </a>
         </mat-list-item>
       </div>
 
@@ -22,7 +25,9 @@
              fxLayoutAlign=" center"
              [routerLink]="getRouterLink('sshkeys')"
              [ngClass]="getLinkClass('sshkeys')">
-            <i class="km-icon-key"></i> SSH Keys</a>
+            <i class="km-icon-key"></i>
+            <span *ngIf="showSidenav"> SSH Keys</span>
+          </a>
         </mat-list-item>
       </div>
 
@@ -33,7 +38,9 @@
              fxLayoutAlign=" center"
              [routerLink]="getRouterLink('members')"
              [ngClass]="getLinkClass('members')">
-            <i class="km-icon-member"></i> Members</a>
+            <i class="km-icon-member"></i>
+            <span *ngIf="showSidenav"> Members</span>
+          </a>
         </mat-list-item>
       </div>
 
@@ -44,7 +51,8 @@
              fxLayoutAlign=" center"
              [routerLink]="getRouterLink('serviceaccounts')"
              [ngClass]="getLinkClass('serviceaccounts')">
-            <i class="km-icon-serviceaccount"></i> Service Accounts</a>
+            <i class="km-icon-serviceaccount"></i>
+            <span *ngIf="showSidenav"> Service Accounts</span></a>
         </mat-list-item>
       </div>
 
@@ -61,7 +69,7 @@
          target="_blank"
          rel="noopener">
         <i [ngStyle]="getCustomLinkIconStyle(link)"></i>
-        <span>{{link.label}}</span>
+        <span *ngIf="showSidenav">{{link.label}}</span>
       </a>
     </mat-list-item>
   </mat-nav-list>
@@ -71,13 +79,13 @@
 
   <div class="km-sidenav-bottom">
     <mat-nav-list>
-      <mat-list-item>
+      <mat-list-item [matTooltip]="getTooltip('projects')">
         <a id="km-nav-item-projects"
            mat-line
            fxLayoutAlign="center center"
            routerLink="/projects">
           <i class="km-icon-arrow-left"></i>
-          <span>back to projects</span>
+          <span *ngIf="showSidenav">back to projects</span>
         </a>
       </mat-list-item>
     </mat-nav-list>

src/app/core/components/sidenav/sidenav.component.scss

@@ -69,4 +69,18 @@
       height: 2 * $baseline-grid;
     }
   }
+
+  &.km-collapse-sidenav {
+    width: .3 * $sidenav-width;
+    overflow-x: hidden;
+
+    .mat-nav-list a {
+      place-content: center !important;
+      padding: 0 !important;
+
+      i {
+        margin-right: 0;
+      }
+    }
+  }
 }

src/app/core/components/sidenav/sidenav.component.ts

@@ -6,10 +6,12 @@ import {Subject} from 'rxjs';
 import {switchMap, takeUntil} from 'rxjs/operators';
 
 import {environment} from '../../../../environments/environment';
+import {UserSettings} from '../../../shared/entity/MemberEntity';
 import {ProjectEntity} from '../../../shared/entity/ProjectEntity';
 import {GroupConfig} from '../../../shared/model/Config';
 import {CustomLink, CustomLinkLocation, filterCustomLinks} from '../../../shared/utils/custom-link-utils/custom-link';
 import {ProjectService, UserService} from '../../services';
+import {View} from '../../services/auth/auth.guard';
 import {SettingsService} from '../../services/settings/settings.service';
 
 @Component({
@@ -20,6 +22,8 @@ import {SettingsService} from '../../services/settings/settings.service';
 export class SidenavComponent implements OnInit, OnDestroy {
   environment: any = environment;
   customLinks: CustomLink[] = [];
+  settings: UserSettings;
+  showSidenav = true;
   private _selectedProject = {} as ProjectEntity;
   private _currentGroupConfig: GroupConfig;
   private _unsubscribe = new Subject<void>();
@@ -36,6 +40,11 @@ export class SidenavComponent implements OnInit, OnDestroy {
       }
     });
 
+    this._settingsService.userSettings.pipe(takeUntil(this._unsubscribe)).subscribe(settings => {
+      this.showSidenav = !settings.collapseSidenav;
+      this.settings = settings;
+    });
+
     this._projectService.selectedProject.pipe(takeUntil(this._unsubscribe))
         .pipe(switchMap(project => {
           this._selectedProject = project;
@@ -66,7 +75,28 @@ export class SidenavComponent implements OnInit, OnDestroy {
   }
 
   getTooltip(viewName: string): string {
-    let tooltip: string;
+    let tooltip = '';
+
+    if (!this.showSidenav) {
+      switch (viewName) {
+        case View.Clusters:
+          tooltip += 'Clusters';
+          break;
+        case View.SSHKeys:
+          tooltip += 'SSH Keys';
+          break;
+        case View.Members:
+          tooltip += 'Members';
+          break;
+        case View.ServiceAccounts:
+          tooltip += 'Service Accounts';
+          break;
+        case View.Projects:
+          tooltip += 'Projects';
+          break;
+      }
+    }
+
     if (!this._hasViewPermissions(viewName)) {
       tooltip = 'Cannot enter this view.';
       if (this._selectedProject.status !== 'Active') {