Reworked navigation to support dropdowns and added info links in a dr…

…opdown on desktop. Removed buttons on info page
IngeniumUA · Mar 22, 2024 · 6f0d13a · 6f0d13a
1 parent 0d523bb
commit 6f0d13a
Show file tree

Hide file tree

Showing 10 changed files with 171 additions and 310 deletions.
diff --git a/src/app/core/layout/public/header/public-header.component.html b/src/app/core/layout/public/header/public-header.component.html
diff --git a/src/app/core/layout/public/header/public-header.component.scss b/src/app/core/layout/public/header/public-header.component.scss
@@ -1,208 +1,50 @@
-/* Navbar */
-.nav-pos-absolute {
-  position: absolute;
-  top: 0;
-  background: none;
-  z-index: 90;
-}
-
-.nav-light {
-  background-color: var(--mainwhite);
-  color: var(--mainblue);
-}
-
-.nav-dark {
-  background-color: var(--mainblue);
-  color: var(--mainwhite);
-}
-
-nav p {
-  color: var(--mainwhite);
-}
-
 nav {
-  @apply w-full border-b border-gray-100;
+  @apply w-full bg-blue-950;
 
-  .nav-content {
-    @apply px-6 py-4 flex flex-row items-center;
+  &.nav-white {
+    @apply bg-white border-b border-gray-100;
   }
 
-  .logo {
-    @apply flex items-center;
-
-    .schild {
-      max-width: 8vh;
-    }
-
-    img {
-      @apply w-full h-full;
-    }
-
-    span {
-      color: var(--mainblue);
-    }
+  &.nav-absolute {
+    @apply absolute bg-transparent top-0 z-30;
   }
 
-  p {
-    font-weight: bolder;
-    font-size: 1.5rem;
+  .nav-item {
+    @apply text-gray-300 border border-transparent hover:border-b-white hover:text-white rounded px-3.5 py-2.5 font-medium outline-none focus:ring-2 focus-visible:ring-4 ring-white transition-colors ease-in-out;
 
-    margin-bottom: 2rem;
+    &.nav-item-active {
+      @apply text-white border-b-white;
+    }
   }
 
-  .links {
-    @apply hidden md:flex flex-1 justify-end items-center;
+  .nav-dropdown {
+    @apply absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none;
 
-    ul {
-      @apply inline-flex;
+    .nav-dropdown-item {
+      @apply w-full text-left block px-4 py-2 text-sm text-gray-700 hover:bg-blue-950 hover:text-white outline-none ring-offset-2 focus:ring-2 focus-visible:ring-4 ring-black transition-colors ease-in-out;
 
-      li {
-        @apply text-lg border-b-2 border-transparent transition-all;
-
-        &:hover {
-          @apply border-blue-950;
-        }
-
-        a {
-          @apply text-blue-900 block px-6 py-3 outline-transparent focus:outline focus:outline-blue-950 rounded;
-        }
+      &.nav-item-active {
+        @apply bg-blue-50 hover:bg-blue-950;
       }
     }
-
-    .buttons {
-      @apply ml-4;
-    }
   }
 
-  .menu-button {
-    @apply flex-1 flex md:hidden justify-end text-blue-950;
+  .desktop-nav {
+    @apply hidden sm:ml-6 sm:block;
   }
 
-  &.nav-dark, &.nav-pos-absolute {
-    @apply border-transparent;
+  .mobile-nav {
+    @apply sm:hidden;
+    background-color: #d4dbe9fa;
 
-    .links {
-      ul {
-        li {
-          &:hover {
-            @apply border-white;
-          }
+    .nav-item {
+      @apply rounded-lg block text-blue-900 hover:bg-blue-900 hover:text-white border-transparent focus-visible:ring-black;
 
-          a {
-            @apply text-white focus:outline-white;
-          }
-        }
+      &.nav-item-active {
+        @apply bg-blue-900 text-white;
       }
     }
-
-    #nav-auth-button {
-      @apply focus:outline-white;
-    }
-
-    .menu-button {
-      @apply text-white;
-    }
   }
-}
-
-nav .schild-wrap:hover, nav p:hover {
-  cursor: pointer;
-}
 
-/* Expanded navbar */
-.expanded-navbar {
-  @apply flex md:hidden flex-col fixed top-0 w-full h-full;
 
-  z-index: 100;
-  background-color: rgba(212, 219, 233, 0.98);
-  animation: fadeIntoView 0.1s ease-in 0s 1 normal forwards;
-  /*animation: slideDownIntoView 0.1s ease-in 0s 1 normal forwards;*/
-
-  .navbar-text-section {
-    a {
-      @apply text-blue-950 font-bold;
-    }
-  }
-}
-
-.expanded-navbar p {
-  color: var(--mainblue);
-}
-
-.navbar-text-section {
-  padding: 0;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-  text-align: left;
-  border-bottom: solid rgba(0, 5, 61, 0.75) 1px;
-}
-
-.navbar-text-section h2 {
-  color: var(--mainblue);
-  margin: 1rem;
-  font-weight: bolder;
-}
-
-.navbar-login-section {
-  padding: 0;
-  margin-left: 1.5rem;
-  margin-right: 1.5rem;
-  text-align: left;
-
-  @apply grid grid-cols-3 text-center items-center mt-2;
-}
-
-.navbar-login-section .lid-button {
-  border: solid 2px var(--mainblue);
-  color: var(--mainblue);
-  font-weight: bold;
-
-  padding: 0.5rem;
-  padding-left: 0.8rem;
-  padding-right: 0.8rem;
-
-  margin: 1rem;
-  margin-right: 1rem;
-  margin-left: 0.5rem;
-}
-
-.navbar-login-section .lid-button:hover {
-  color: var(--mainwhite);
-  background-color: var(--mainblue);
-}
-
-.connect {
-  position: absolute;
-  bottom: 0.2rem;
-
-  color: var(--mainblue);
-  margin-left: 0.2rem;
-  margin-right: 0.2rem;
-
-  display: flex;
-  flex-grow: 1;
-  gap: 0.2rem;
-  flex-direction: row;
-  align-items: center;
-}
-
-.connect h3 {
-  color: var(--mainblue);
-}
-
-@keyframes slideDownIntoView {
-  from {
-    transform: translateY(-100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-@keyframes fadeIntoView {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
 }
diff --git a/src/app/core/layout/public/header/public-header.component.ts b/src/app/core/layout/public/header/public-header.component.ts
@@ -1,9 +1,11 @@
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {BreakpointObserver, BreakpointState} from '@angular/cdk/layout';
-import {NgClass, NgIf, NgStyle, NgTemplateOutlet} from '@angular/common';
-import {NavigationStart, Router, RouterLink} from '@angular/router';
+import {NgClass, NgIf, NgOptimizedImage, NgStyle, NgTemplateOutlet} from '@angular/common';
+import {NavigationStart, Router, RouterLink, RouterLinkActive} from '@angular/router';
 import {AuthService} from '../../../services/user/auth/auth.service';
 import {distinctUntilChanged} from 'rxjs/operators';
+import {Store} from '@ngxs/store';
+import {User} from '../../../store';
 
 
 @Component({
@@ -17,10 +19,15 @@ import {distinctUntilChanged} from 'rxjs/operators';
     NgTemplateOutlet,
     NgClass,
     NgStyle,
+    NgOptimizedImage,
+    RouterLinkActive,
   ],
 })
 export class PublicHeaderComponent implements OnInit {
-  isMobile: boolean = true;
+  mobileMenuOpen: boolean = false;
+  accountDropdownOpen: boolean = false;
+  infoDropdownOpen: boolean = false;
+
   isNavdropdown: boolean = false;
   isAuth: boolean = false;
 
@@ -29,49 +36,34 @@ export class PublicHeaderComponent implements OnInit {
 
   @Input() internalToggle: boolean = true; // If toggling the navbar should use this navbar or outsource it
   @Output() isToggleEmitter = new EventEmitter<boolean>();
-  isToggle: boolean = true;
 
-  constructor(private router: Router,
-              private breakpointObserver: BreakpointObserver,
-              private authService: AuthService) {
-    router.events.forEach((event) => {
-      if (event instanceof NavigationStart) {
-        this.isNavdropdown = false;
-      }
-    });
-  }
+  constructor(private authService: AuthService, private store: Store) {}
 
   ngOnInit() {
     if (this.authService.userValue) {
       this.isAuth = true;
     }
-    if (this.authService.user.
-      pipe(distinctUntilChanged())
+
+    this.authService.user
+      .pipe(distinctUntilChanged())
       .subscribe((data) => {
         this.isAuth = data != null;
-      }))
+      });
+  }
 
-      this.breakpointObserver  // Breakpoint Observable for responsiveness
-        .observe(['(min-width: 850px)'])
-        .subscribe((state: BreakpointState) => {
-          this.isMobile = !state.matches;
-        });
+  Logout() {
+    this.store.dispatch(new User.Logout());
   }
 
-  ToggleNavDropdown(): void {
-    if (this.internalToggle) {
-      this.isNavdropdown = ! this.isNavdropdown;
-    } else {
-      this.isToggle = !this.isToggle;
-      this.isToggleEmitter.emit(this.isToggle);
-    }
+  ToggleNavDropdown() {
+    this.mobileMenuOpen = !this.mobileMenuOpen;
   }
 
-  Home(): void {
-    this.router.navigate(['home']);
+  setAccountDropdown(b: boolean) {
+    this.accountDropdownOpen = b;
   }
 
-  EventClick() {
-    this.router.navigate(['event/']);
+  setInfoDropdown(b: boolean) {
+    this.infoDropdownOpen = b;
   }
 }
diff --git a/src/app/core/services/user/auth/auth.service.ts b/src/app/core/services/user/auth/auth.service.ts
@@ -58,7 +58,6 @@ export class AuthService {
 
     this.cartService.clear();
     this.httpClient.post<any>(apiEnviroment.apiUrl + 'api/auth/logout', body );
-    this.store.dispatch(new User.removeUserDetails());
 
     localStorage.removeItem('user');
     this.userSubject.next(null); // Set observable to null

diff --git a/src/app/core/store/user/user.actions.ts b/src/app/core/store/user/user.actions.ts
@@ -1,3 +1,4 @@
+
 export namespace User {
   export class FetchUserDetails {
     static readonly type = '[User] Login';
@@ -6,4 +7,8 @@ export namespace User {
   export class removeUserDetails {
     static readonly type = '[User] Logout';
   }
+
+  export class Logout {
+    static readonly type = '[User] Logout';
+  }
 }
diff --git a/src/app/core/store/user/user.state.ts b/src/app/core/store/user/user.state.ts
@@ -6,6 +6,7 @@ import {HubAccountData} from '../../../shared/models/user';
 import {apiEnviroment} from '../../../../environments/environment';
 import {HttpClient} from '@angular/common/http';
 import {tap} from 'rxjs';
+import {AuthService} from '../../services/user/auth/auth.service';
 
 @State<UserStateModel>({
   name: 'user',
@@ -17,7 +18,7 @@ import {tap} from 'rxjs';
 })
 @Injectable()
 export class UserState {
-  constructor(private httpClient: HttpClient) {}
+  constructor(private httpClient: HttpClient, private authService: AuthService) {}
 
   /**
    * Selectors
@@ -62,4 +63,16 @@ export class UserState {
       userDetails: null,
     });
   }
+
+  @Action(User.Logout)
+  logout(ctx: StateContext<UserStateModel>) {
+    this.authService.logout();
+    console.log('Logout');
+
+    ctx.setState({
+      token: null,
+      refreshToken: null,
+      userDetails: null,
+    });
+  }
 }
diff --git a/src/app/features/public/account/account-details/account-details.component.ts b/src/app/features/public/account/account-details/account-details.component.ts
@@ -46,8 +46,4 @@ export class AccountDetailsComponent implements OnInit {
   RefreshAuth(): void {
     this.authService.refreshAccessToken().subscribe();
   }
-
-  Logout(): void {
-    this.authService.logout();
-  }
 }