From 75443578265fb6b88780cb1b573ef97edad0d3b9 Mon Sep 17 00:00:00 2001 From: nymkappa <1612910616@pm.me> Date: Tue, 22 Aug 2023 08:35:10 +0200 Subject: [PATCH] [ui] redesign UX for navbar using sticky --- .../master-page/master-page.component.html | 19 +++++++---- .../app/components/menu/menu.component.html | 34 +++++++++---------- .../app/components/menu/menu.component.scss | 23 +++++++------ .../src/app/components/menu/menu.component.ts | 26 +++++++++----- .../global-footer.component.html | 2 +- 5 files changed, 60 insertions(+), 44 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 de975ef36..52b3fccb4 100644 --- a/frontend/src/app/components/master-page/master-page.component.html +++ b/frontend/src/app/components/master-page/master-page.component.html @@ -1,5 +1,3 @@ - -
@@ -78,11 +76,18 @@
- +
+ -
- -
+
+ + +
+ +
+ + +
+
- diff --git a/frontend/src/app/components/menu/menu.component.html b/frontend/src/app/components/menu/menu.component.html index 554018335..927d6212f 100644 --- a/frontend/src/app/components/menu/menu.component.html +++ b/frontend/src/app/components/menu/menu.component.html @@ -1,31 +1,31 @@ -
-
+
+
-
\ 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 8148ea1df..698d33d9e 100644 --- a/frontend/src/app/components/menu/menu.component.scss +++ b/frontend/src/app/components/menu/menu.component.scss @@ -1,12 +1,13 @@ .sidenav { - z-index: 200; + z-index: 1; background-color: transparent; - width: 100vw; - height: 100vh; - position: fixed; - left: -100vw; - top: 0; + width: 225px; + height: calc(100vh - 65px); + position: sticky; + top: 65px; transition: 0.25s; + margin-left: -250px; + box-shadow: 5px 0px 30px 0px #000; } .scrollable { @@ -15,27 +16,27 @@ } .sidenav.open { + margin-left: 0px; left: 0px; + display: block; } .sidenav a, button{ text-decoration: none; color: lightgray; margin-left: 20px; - display: block; } .sidenav a:hover { color: white; } .sidenav nav { - box-shadow: 0px 0px 15px 0px #000; - height: 100vh; - max-width: 250px; + width: 100%; + height: calc(100vh - 65px); background-color: #1d1f31; padding-left: 20px; padding-right: 20px; padding-top: 20px; - padding-bottom: 100px; + padding-bottom: 20px; } @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 4daa3f35e..3a2bce10e 100644 --- a/frontend/src/app/components/menu/menu.component.ts +++ b/frontend/src/app/components/menu/menu.component.ts @@ -3,7 +3,7 @@ import { Observable } from 'rxjs'; import { ApiService } from '../../services/api.service'; import { MenuGroup } from '../../interfaces/services.interface'; import { StorageService } from '../../services/storage.service'; -import { Router } from '@angular/router'; +import { Router, NavigationStart } from '@angular/router'; import { StateService } from '../../services/state.service'; @Component({ @@ -34,6 +34,15 @@ export class MenuComponent implements OnInit { } this.isServicesPage = this.router.url.includes('/services/'); + this.navOpen = this.isServicesPage && !this.isSmallScreen(); + + this.router.events.subscribe((event) => { + if (event instanceof NavigationStart) { + if (!this.isServicesPage) { + this.navOpen = false; + } + } + }); } isSmallScreen() { @@ -51,7 +60,9 @@ export class MenuComponent implements OnInit { } onLinkClick(link) { - this.navOpen = false; + if (!this.isServicesPage || this.isSmallScreen()) { + this.navOpen = false; + } this.router.navigateByUrl(link); } @@ -61,13 +72,12 @@ export class MenuComponent implements OnInit { @HostListener('window:click', ['$event']) onClick(event) { - if (event.target.id === 'empty-area') { + const cssClasses = event.target.className; + const isHamburger = cssClasses.indexOf('profile_image') !== -1; + const isMenu = cssClasses.indexOf('menu-click') !== -1; + + if (!isHamburger && !this.isServicesPage && !isMenu) { this.navOpen = false; } } - - @HostListener('window:scroll', ['$event']) - onScroll(event) { - this.navOpen = false; - } } diff --git a/frontend/src/app/shared/components/global-footer/global-footer.component.html b/frontend/src/app/shared/components/global-footer/global-footer.component.html index af7f09d85..e48e8b5a8 100644 --- a/frontend/src/app/shared/components/global-footer/global-footer.component.html +++ b/frontend/src/app/shared/components/global-footer/global-footer.component.html @@ -73,7 +73,7 @@ Matrix
-
+

{{ (backendInfo$ | async)?.hostname }} (v{{ (backendInfo$ | async )?.version }}) [{{ (backendInfo$ | async )?.gitCommit | slice:0:8 }}]

v{{ packetJsonVersion }} [{{ frontendGitCommitHash }}]