diff --git a/src/app/app.component.html b/src/app/app.component.html index c5fe3929..11334b16 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,7 +1,7 @@
- +
-
+
diff --git a/src/app/app.component.scss b/src/app/app.component.scss index d562a219..4df1dee4 100644 --- a/src/app/app.component.scss +++ b/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; + } } } diff --git a/src/app/app.component.ts b/src/app/app.component.ts index e00da019..06672b9e 100644 --- a/src/app/app.component.ts +++ b/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 => { diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html index 4b8f9d64..3867eabd 100644 --- a/src/app/navbar/navbar.component.html +++ b/src/app/navbar/navbar.component.html @@ -1,6 +1,7 @@
+ +
+ +
diff --git a/src/app/navbar/navbar.component.scss b/src/app/navbar/navbar.component.scss index 9d5e015a..d2e77a86 100644 --- a/src/app/navbar/navbar.component.scss +++ b/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); + } +} diff --git a/src/app/navbar/navbar.component.ts b/src/app/navbar/navbar.component.ts index 285b3f43..8f9451dd 100644 --- a/src/app/navbar/navbar.component.ts +++ b/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(); + 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); } diff --git a/src/app/navbar/navbar.module.ts b/src/app/navbar/navbar.module.ts index 616dea85..904a8d13 100644 --- a/src/app/navbar/navbar.module.ts +++ b/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], diff --git a/src/app/shared/shared-variable/shared-variable.service.ts b/src/app/shared/shared-variable/shared-variable.service.ts index 230c4552..90e245e8 100644 --- a/src/app/shared/shared-variable/shared-variable.service.ts +++ b/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(0); - } private selectedOrganisationId: number; private routerInfo: BehaviorSubject; private organizationInfo: Organisation[]; - private userMinimalList: UserMinimal[]; + + constructor(private authService: AuthService, private organisationService: OrganisationService) { + this.routerInfo = new BehaviorSubject(0); + } getValue(): Observable { return this.routerInfo.asObservable(); diff --git a/src/assets/images/arrows-up-to-line.svg b/src/assets/images/arrows-up-to-line.svg new file mode 100644 index 00000000..ad877b9a --- /dev/null +++ b/src/assets/images/arrows-up-to-line.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/src/assets/scss/setup/_variables.scss b/src/assets/scss/setup/_variables.scss index 146d6ba1..b1997e62 100644 --- a/src/assets/scss/setup/_variables.scss +++ b/src/assets/scss/setup/_variables.scss @@ -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;