From 30be7e0f7a568ed5bd78f03d9178e3b65fe6a941 Mon Sep 17 00:00:00 2001 From: nymkappa <1612910616@pm.me> Date: Mon, 21 Aug 2023 22:08:25 +0200 Subject: [PATCH] [ui] redesign UX for navbar --- .../master-page/master-page.component.html | 5 +- .../master-page/master-page.component.scss | 15 +++--- .../app/components/menu/menu.component.html | 50 +++++++++++-------- .../app/components/menu/menu.component.scss | 42 +++++++--------- .../src/app/components/menu/menu.component.ts | 16 +++--- .../global-footer.component.html | 6 +-- 6 files changed, 65 insertions(+), 69 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 2fb71b587..5dcf5af19 100644 --- a/frontend/src/app/components/master-page/master-page.component.html +++ b/frontend/src/app/components/master-page/master-page.component.html @@ -1,7 +1,8 @@ -
+
+
-
-
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 23dfd8b39..0db10a52f 100644 --- a/frontend/src/app/components/master-page/master-page.component.scss +++ b/frontend/src/app/components/master-page/master-page.component.scss @@ -1,3 +1,11 @@ +.sticky-header { + position: sticky; + position: -webkit-sticky; + top: 0; + width: 100%; + z-index: 100; +} + li.nav-item.active { background-color: #653b9c; } @@ -226,10 +234,3 @@ nav { 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/menu/menu.component.html b/frontend/src/app/components/menu/menu.component.html index d901eb0ec..554018335 100644 --- a/frontend/src/app/components/menu/menu.component.html +++ b/frontend/src/app/components/menu/menu.component.html @@ -1,25 +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 2a31bdb2c..8148ea1df 100644 --- a/frontend/src/app/components/menu/menu.component.scss +++ b/frontend/src/app/components/menu/menu.component.scss @@ -1,22 +1,17 @@ .sidenav { - z-index: 10; - background-color: #1d1f31; - box-shadow: 0px 0px 15px 0px #000; - width: 225px; - height: calc(100vh - 65px); + z-index: 200; + background-color: transparent; + width: 100vw; + height: 100vh; + position: fixed; + left: -100vw; + top: 0; + transition: 0.25s; +} + +.scrollable { overflow-x: hidden; overflow-y: scroll; - position: fixed; - left: -225px; - top: 65px; - transition: 0.25s; - @media (max-width: 991px) { - height: calc(100vh - 65px - 55px); - } - @media (max-width: 572px) { - top: 100px; - height: calc(100vh - 105px); - } } .sidenav.open { @@ -25,7 +20,6 @@ .sidenav a, button{ text-decoration: none; - font-size: 20x; color: lightgray; margin-left: 20px; display: block; @@ -34,18 +28,16 @@ color: white; } .sidenav nav { - height: auto; + box-shadow: 0px 0px 15px 0px #000; + height: 100vh; + max-width: 250px; + background-color: #1d1f31; padding-left: 20px; padding-right: 20px; - padding-top: 30px; - padding-bottom: 50px; - @media (max-width: 572px) { - padding-bottom: 100px; - } + padding-top: 20px; + 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) { - .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} } \ No newline at end of file diff --git a/frontend/src/app/components/menu/menu.component.ts b/frontend/src/app/components/menu/menu.component.ts index 4d038ab87..6a5fee4a1 100644 --- a/frontend/src/app/components/menu/menu.component.ts +++ b/frontend/src/app/components/menu/menu.component.ts @@ -34,7 +34,6 @@ export class MenuComponent implements OnInit { } this.isServicesPage = this.router.url.includes('/services/'); - this.navOpen = this.isServicesPage && !this.isSmallScreen(); } isSmallScreen() { @@ -51,20 +50,19 @@ export class MenuComponent implements OnInit { }); } - onLinkClick() { - if (!this.isServicesPage || this.isSmallScreen()) { - this.navOpen = false; - } + onLinkClick(link) { + this.navOpen = false; + this.router.navigateByUrl(link); } hambugerClick() { this.navOpen = !this.navOpen; } - @HostListener('window:resize', ['$event']) - onResize(event) { - if (this.isServicesPage) { - this.navOpen = !this.isSmallScreen(); + @HostListener('window:click', ['$event']) + onClick(event) { + if (event.target.id === 'empty-area') { + 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 a52fe4e1e..af7f09d85 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 @@ -1,7 +1,7 @@