From 5aff2c74e67a2827f49b9efb431a37e334e890dc Mon Sep 17 00:00:00 2001 From: nymkappa <1612910616@pm.me> Date: Fri, 18 Aug 2023 17:56:07 +0200 Subject: [PATCH] [menu] show hamburger when logged out, fix menu scrolling on small screen --- .../master-page/master-page.component.html | 8 +++++ .../master-page/master-page.component.scss | 20 ++++++++++- .../master-page/master-page.component.ts | 15 +++++++- .../app/components/menu/menu.component.html | 30 ++++++++-------- .../app/components/menu/menu.component.scss | 34 +++++++++++-------- .../src/app/components/menu/menu.component.ts | 10 ++++-- .../svg-images/svg-images.component.html | 5 +++ frontend/src/app/services/api.service.ts | 12 +++++++ 8 files changed, 98 insertions(+), 36 deletions(-) diff --git a/frontend/src/app/components/master-page/master-page.component.html b/frontend/src/app/components/master-page/master-page.component.html index 77212b1a3..bcf21fc53 100644 --- a/frontend/src/app/components/master-page/master-page.component.html +++ b/frontend/src/app/components/master-page/master-page.component.html @@ -3,6 +3,12 @@
+
+
diff --git a/frontend/src/app/components/master-page/master-page.component.scss b/frontend/src/app/components/master-page/master-page.component.scss index 95b9474b9..a34dea0bd 100644 --- a/frontend/src/app/components/master-page/master-page.component.scss +++ b/frontend/src/app/components/master-page/master-page.component.scss @@ -86,7 +86,6 @@ li.nav-item { .navbar-brand { position: relative; - height: 65px; } .navbar-brand.dual-logos { @@ -209,4 +208,23 @@ nav { margin-left: 5px; margin-right: 0px; } +} + +.profile_image_container { + width: 35px; + margin-right: 15px; + text-align: center; + align-self: center; + cursor: pointer; +} +.profile_image { + height: 35px; + border-radius: 10px; +} + +.content-padding { + padding-top: 65px; + @media (max-width: 572px) { + padding-top: 100px; + } } \ No newline at end of file diff --git a/frontend/src/app/components/master-page/master-page.component.ts b/frontend/src/app/components/master-page/master-page.component.ts index 99bccebb5..a4bbe8313 100644 --- a/frontend/src/app/components/master-page/master-page.component.ts +++ b/frontend/src/app/components/master-page/master-page.component.ts @@ -1,9 +1,10 @@ -import { Component, OnInit, Input } from '@angular/core'; +import { Component, OnInit, Input, ViewChild } from '@angular/core'; import { Env, StateService } from '../../services/state.service'; import { Observable, merge, of } from 'rxjs'; import { LanguageService } from '../../services/language.service'; import { EnterpriseService } from '../../services/enterprise.service'; import { NavigationService } from '../../services/navigation.service'; +import { MenuComponent } from '../menu/menu.component'; @Component({ selector: 'app-master-page', @@ -25,6 +26,10 @@ export class MasterPageComponent implements OnInit { networkPaths: { [network: string]: string }; networkPaths$: Observable>; footerVisible = true; + userAuth: any | undefined; + + @ViewChild(MenuComponent) + private menuComponent!: MenuComponent; constructor( public stateService: StateService, @@ -51,6 +56,8 @@ export class MasterPageComponent implements OnInit { this.footerVisible = this.footerVisibleOverride; } }); + + this.userAuth = JSON.parse(localStorage.getItem('auth') || '') ?? null; } collapse(): void { @@ -64,4 +71,10 @@ export class MasterPageComponent implements OnInit { brandClick(e): void { this.stateService.resetScroll$.next(true); } + + hamburgerClick(): void { + if (this.menuComponent) { + this.menuComponent.hambugerClick(); + } + } } diff --git a/frontend/src/app/components/menu/menu.component.html b/frontend/src/app/components/menu/menu.component.html index 2cb5c828b..32fb66e0a 100644 --- a/frontend/src/app/components/menu/menu.component.html +++ b/frontend/src/app/components/menu/menu.component.html @@ -1,18 +1,16 @@
-
- -
+
\ No newline at end of file diff --git a/frontend/src/app/components/menu/menu.component.scss b/frontend/src/app/components/menu/menu.component.scss index 559e3d97d..959453c16 100644 --- a/frontend/src/app/components/menu/menu.component.scss +++ b/frontend/src/app/components/menu/menu.component.scss @@ -1,34 +1,31 @@ .sidenav { - height: 100%; - width: 0; - position: fixed; - z-index: 1; - top: 65px; - left: 0; + z-index: 10; background-color: #1d1f31; - overflow-x: hidden; box-shadow: 0px 0px 15px 0px #000; + width: 0px; + height: calc(100vh - 65px); + overflow-x: hidden; overflow-y: scroll; - height: 100vh; + position: fixed; + left: 0; + top: 65px; @media (max-width: 991px) { - top: 80px; - }; + height: calc(100vh - 65px - 55px); + } @media (max-width: 572px) { - top: 120px; + top: 100px; + height: calc(100vh - 105px); } } .sidenav.open { width: 235px; - @media (max-width: 400px) { - width: 100%; - } } .sidenav.close { width: 0px; } -.sidenav a { +.sidenav a, button{ text-decoration: none; font-size: 20x; color: lightgray; @@ -38,6 +35,13 @@ .sidenav a:hover { color: white; } +.sidenav nav { + height: auto; + padding-bottom: 50px; + @media (max-width: 572px) { + padding-bottom: 100px; + } +} /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */ @media screen and (max-height: 450px) { diff --git a/frontend/src/app/components/menu/menu.component.ts b/frontend/src/app/components/menu/menu.component.ts index 494931b1d..7746c8dc2 100644 --- a/frontend/src/app/components/menu/menu.component.ts +++ b/frontend/src/app/components/menu/menu.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, Input } from '@angular/core'; import { Observable } from 'rxjs'; import { ApiService } from '../../services/api.service'; import { MenuGroup } from '../../interfaces/services.interface'; @@ -10,7 +10,7 @@ import { MenuGroup } from '../../interfaces/services.interface'; }) export class MenuComponent implements OnInit { - navOpen: boolean = true; + navOpen: boolean = false; userMenuGroups$: Observable | undefined; constructor( @@ -22,6 +22,10 @@ export class MenuComponent implements OnInit { } logout(): void { - console.log('logout'); + this.apiService.logout$().subscribe(); + } + + hambugerClick() { + this.navOpen = !this.navOpen; } } diff --git a/frontend/src/app/components/svg-images/svg-images.component.html b/frontend/src/app/components/svg-images/svg-images.component.html index c4d5296bd..452cd14df 100644 --- a/frontend/src/app/components/svg-images/svg-images.component.html +++ b/frontend/src/app/components/svg-images/svg-images.component.html @@ -74,6 +74,11 @@ + + + + + diff --git a/frontend/src/app/services/api.service.ts b/frontend/src/app/services/api.service.ts index a5543cab6..f1d821a8d 100644 --- a/frontend/src/app/services/api.service.ts +++ b/frontend/src/app/services/api.service.ts @@ -353,4 +353,16 @@ export class ApiService { headers: { 'Authorization': auth.token } }); } + + logout$() { + const auth = JSON.parse(localStorage.getItem('auth') || ''); + if (!auth) { + return; + } + + localStorage.setItem('auth', null); + return this.httpClient.post(`${SERVICES_API_PREFIX}/auth/logout`, { + headers: { 'Authorization': auth.token } + }); + } }