now able to hide menu

Author: Lauest-Iterator

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

@@ -2,7 +2,13 @@
 @import "src/assets/scss/setup/variables";
 
 #content {
+  transition: margin-left 0.3s ease;
+
   @media (min-width: $screen-md-min) {
-    padding-left: $navWidth;
+    padding-left: 0;
+
+    &.nav-visible {
+      padding-left: $navWidth;
+    }
   }
 }

src/app/app.component.ts

@@ -10,6 +10,12 @@ export class AppComponent {
   title = "OS2IoT-frontend";
   isLoggedIn = true;
 
+  isNavVisible = false;
+
+  onNavToggle(isVisible: boolean) {
+    this.isNavVisible = isVisible;
+  }
+
   constructor(private loggedInService: LoggedInService) {
     loggedInService.changeEmitted?.subscribe(change => {
       this.isLoggedIn = change;

src/app/navbar/navbar.component.html

@@ -1,6 +1,8 @@
 <nav
   class="navbar navbar-expand-md navbar-light d-md-flex align-items-md-start flex-md-column p-3"
   aria-expanded="false"
+  *ngIf="isVisible"
+  [@navAnimation]
 >
   <img class="img-logo" alt="OS2IoT-logo" [src]="imagePath" />
 
@@ -138,4 +140,13 @@
       </ul>
     </div>
   </ng-template>
+  <div class="toggle-button hide-button" (click)="toggleNavbar()">
+    <mat-icon class="icon-arrow-nav" svgIcon="nav-arrow"></mat-icon>
+  </div>
 </nav>
+
+@if(!isVisible){
+<div class="toggle-button show-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,53 @@ button:focus,
     }
   }
 }
+
+.hide-button {
+  right: 0px;
+  padding-left: 2px;
+  border-radius: 5px 0 0 5px;
+}
+
+.show-button {
+  border-radius: 0 5px 5px 0;
+  padding-right: 2px;
+}
+
+.toggle-button {
+  top: 50%;
+  position: absolute;
+  width: 18px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: $color-neutral-200;
+
+  &:hover {
+    background-color: $color-link-active-bg;
+  }
+
+  &:hover .icon-arrow-nav {
+    color: $white;
+  }
+}
+
+.rotate {
+  transform: rotate(180deg);
+}
+
+.icon-arrow-nav {
+  color: $default-color;
+  height: 40px;
+  width: 10px;
+}
+
+@media (max-width: 768px) {
+  .icon-arrow-nav,
+  .toggle-button,
+  .show-button,
+  .hide-button,
+  .rotate {
+    display: none;
+  }
+}

src/app/navbar/navbar.component.ts

@@ -1,4 +1,7 @@
-import { Component, OnInit } from "@angular/core";
+import { animate, state, style, transition, trigger } from "@angular/animations";
+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";
@@ -17,6 +20,35 @@ import { UserResponse } from "./../admin/users/user.model";
   selector: "app-navbar",
   templateUrl: "./navbar.component.html",
   styleUrls: ["./navbar.component.scss"],
+  animations: [
+    trigger("navAnimation", [
+      state(
+        "void",
+        style({
+          transform: "translateX(-100%)",
+          opacity: 0,
+        })
+      ),
+      transition(":enter", [
+        animate(
+          "0.3s ease-out",
+          style({
+            transform: "translateX(0)",
+            opacity: 1,
+          })
+        ),
+      ]),
+      transition(":leave", [
+        animate(
+          "0.3s ease-in",
+          style({
+            transform: "translateX(-100%)",
+            opacity: 0,
+          })
+        ),
+      ]),
+    ]),
+  ],
 })
 export class NavbarComponent implements OnInit {
   public organisations: Organisation[];
@@ -30,6 +62,8 @@ export class NavbarComponent implements OnInit {
   isLoginMode = true;
   user: User;
 
+  isVisible = true;
+
   userInfo: CurrentUserInfoResponse;
   faSignInAlt = faSignInAlt;
   imagePath = "../../assets/images/os2iot.png ";
@@ -41,11 +75,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>();
+
   onLogout() {
     this.authService.logout();
     this.router.navigateByUrl("auth");
@@ -90,6 +134,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() {
@@ -132,6 +177,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,8 +1,7 @@
 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 { UserMinimal } 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";
@@ -68,6 +67,10 @@ export class SharedVariableService {
     return this.organizationInfo;
   }
 
+  getCurrentOrgRole(): string {
+    return "ss";
+  }
+
   getUsername(): string {
     return this.getUserInfo()?.user?.name;
   }

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;