Merge pull request #196 from OS2iot/feature/44457_hide_menu

Feature/44457 hide menu

Author: fcv-iteratorIt

src/app/app.component.html

@@ -1,7 +1,7 @@
 <div *ngIf="isLoggedIn">
-  <app-navbar></app-navbar>
+  <app-navbar (navToggle)="onNavToggle($event)"></app-navbar>
 </div>
-<div id="content">
+<div id="content" [class.nav-visible]="isNavVisible">
   <div id="mainBody">
     <router-outlet></router-outlet>
   </div>

src/app/app.component.scss

@@ -3,6 +3,10 @@
 
 #content {
   @media (min-width: $screen-md-min) {
-    padding-left: $navWidth;
+    padding-left: 0;
+    transition: padding-left 0.3s ease-in-out;
+    &.nav-visible {
+      padding-left: $navWidth;
+    }
   }
 }

src/app/app.component.ts

@@ -9,6 +9,11 @@ import { LoggedInService } from "@shared/services/loggedin.service";
 export class AppComponent {
   title = "OS2IoT-frontend";
   isLoggedIn = true;
+  isNavVisible = true;
+
+  onNavToggle(isVisible: boolean) {
+    this.isNavVisible = isVisible;
+  }
 
   constructor(private loggedInService: LoggedInService) {
     loggedInService.changeEmitted?.subscribe(change => {

src/app/navbar/navbar.component.html

@@ -1,6 +1,7 @@
 <nav
+  class="navbar-container navbar navbar-expand-md navbar-light d-md-flex align-items-md-start flex-md-column p-3"
   aria-expanded="false"
-  class="navbar navbar-expand-md navbar-light d-md-flex align-items-md-start flex-md-column p-3"
+  [class.nav-visible]="isVisible"
 >
   <img [src]="imagePath" alt="OS2IoT-logo" class="img-logo"/>
 
@@ -139,3 +140,7 @@
     </div>
   </ng-template>
 </nav>
+
+<div [class.nav-visible-button]="isVisible" class="toggle-button" (click)="toggleNavbar()">
+  <mat-icon class="icon-arrow-nav rotate" svgIcon="nav-arrow"></mat-icon>
+</div>

src/app/navbar/navbar.component.scss

@@ -115,3 +115,60 @@ button:focus,
     }
   }
 }
+
+.toggle-button {
+  top: 50%;
+  position: absolute;
+  width: 18px;
+  height: 40px;
+  left: 0px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: $color-neutral-200;
+  padding: 0 2px 0 0;
+  border-radius: 0 5px 5px 0;
+  transition: left 0.3s ease-in-out, border-radius 0.3s ease-in-out;
+
+  &:hover {
+    background-color: $color-link-active-bg;
+  }
+
+  &:hover .icon-arrow-nav {
+    color: $white;
+  }
+
+  &.nav-visible-button {
+    border-radius: 5px 0 0 5px;
+    left: 248px;
+    padding: 0 0 0 2px;
+    .icon-arrow-nav {
+      transform: rotate(0deg);
+    }
+  }
+}
+
+.icon-arrow-nav {
+  color: $default-color;
+  height: 40px;
+  width: 10px;
+  transform: rotate(180deg);
+}
+
+@media (max-width: 768px) {
+  .icon-arrow-nav,
+  .toggle-button,
+  .show-button,
+  .hide-button {
+    display: none;
+  }
+}
+
+.navbar-container {
+  transform: translateX(-100%);
+  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+
+  &.nav-visible {
+    transform: translateX(0);
+  }
+}

src/app/navbar/navbar.component.ts

@@ -1,4 +1,6 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, EventEmitter, OnInit, Output } from "@angular/core";
+import { MatIconRegistry } from "@angular/material/icon";
+import { DomSanitizer } from "@angular/platform-browser";
 import { Router } from "@angular/router";
 import { Organisation } from "@app/admin/organisation/organisation.model";
 import { PermissionType } from "@app/admin/permission/permission.model";
@@ -28,6 +30,8 @@ export class NavbarComponent implements OnInit {
   isCollapsed = false;
   user: User;
 
+  isVisible = true;
+
   userInfo: CurrentUserInfoResponse;
   faSignInAlt = faSignInAlt;
   imagePath = "../../assets/images/os2iot.png ";
@@ -39,11 +43,21 @@ export class NavbarComponent implements OnInit {
     private sharedVariableService: SharedVariableService,
     private loggedInService: LoggedInService,
     private meService: MeService,
-    private route: Router
+    private route: Router,
+    private matIconRegistry: MatIconRegistry,
+    private domSanitizer: DomSanitizer
   ) {
+    this.matIconRegistry.addSvgIcon(
+      "nav-arrow",
+      this.domSanitizer.bypassSecurityTrustResourceUrl("assets/images/arrows-up-to-line.svg"),
+      {}
+    );
+
     translate.use("da");
   }
 
+  @Output() navToggle = new EventEmitter<boolean>();
+
   isLoggedIn() {
     return this.authService.isLoggedIn();
   }
@@ -56,6 +70,7 @@ export class NavbarComponent implements OnInit {
     this.getAllowedOrganizations();
     this.organisations.sort((a, b) => a.name.localeCompare(b.name, "en", { numeric: true }));
     this.selected = this.sharedVariableService.getSelectedOrganisationId();
+    this.navToggle.emit(this.isVisible);
   }
 
   getAllowedOrganizations() {
@@ -87,6 +102,11 @@ export class NavbarComponent implements OnInit {
     }
   }
 
+  public toggleNavbar() {
+    this.isVisible = !this.isVisible;
+    this.navToggle.emit(this.isVisible);
+  }
+
   setSelectedOrganisation(value: number) {
     this.sharedVariableService.setSelectedOrganisationId(value);
   }

src/app/navbar/navbar.module.ts

@@ -8,6 +8,7 @@ import { NavbarComponent } from "./navbar.component";
 import { SharedModule } from "../shared/shared.module";
 
 // Services
+import { MatIconModule } from "@angular/material/icon";
 import { RouterModule } from "@angular/router";
 import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
 import { TranslateModule } from "@ngx-translate/core";
@@ -27,6 +28,7 @@ import { GlobalAdminComponent } from "./global-admin/global-admin.component";
     NGMaterialModule,
     InlineSVGModule,
     NgOptimizedImage,
+    MatIconModule,
   ],
   exports: [NavbarComponent],
   providers: [RestService, NavbarComponent],

src/app/shared/shared-variable/shared-variable.service.ts

@@ -1,9 +1,6 @@
 import { Injectable } from "@angular/core";
 import { Organisation, OrganisationGetMinimalResponse } from "@app/admin/organisation/organisation.model";
 import { OrganisationService } from "@app/admin/organisation/organisation.service";
-import { PermissionType } from "@app/admin/permission/permission.model";
-import { UserMinimal, UserMinimalResponse } from "@app/admin/users/user-minimal.model";
-import { UserMinimalService } from "@app/admin/users/user-minimal.service";
 import { AuthService, CurrentUserInfoResponse } from "@auth/auth.service";
 import { BehaviorSubject, Observable } from "rxjs";
 import { tap } from "rxjs/operators";
@@ -12,17 +9,13 @@ import { tap } from "rxjs/operators";
   providedIn: "root",
 })
 export class SharedVariableService {
-  constructor(
-    private authService: AuthService,
-    private organisationService: OrganisationService,
-    private userMinimalService: UserMinimalService
-  ) {
-    this.routerInfo = new BehaviorSubject<number>(0);
-  }
   private selectedOrganisationId: number;
   private routerInfo: BehaviorSubject<number>;
   private organizationInfo: Organisation[];
-  private userMinimalList: UserMinimal[];
+
+  constructor(private authService: AuthService, private organisationService: OrganisationService) {
+    this.routerInfo = new BehaviorSubject<number>(0);
+  }
 
   getValue(): Observable<number> {
     return this.routerInfo.asObservable();

src/assets/images/arrows-up-to-line.svg

@@ -391,5 +391,5 @@ $warning-color: #fde047;
 $default-color: #525252;
 $default-neutral-color: #d4d4d4;
 $default-icon-color: #404040;
-
+$color-neutral-200: #e5e5e5;
 $selector-font-color: #737373;