Merge pull request #1 from WhatTheShuck/SideNavRevamp

SideNav Reworked
WhatTheShuck · Jun 27, 2024 · 2636f23 · 2636f23
2 parents 50b0cc2 + d6b31a7
commit 2636f23
Show file tree

Hide file tree

Showing 9 changed files with 172 additions and 159 deletions.
diff --git a/TD2/angular.json b/TD2/angular.json
@@ -36,8 +36,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kb",
-                  "maximumError": "1mb"
+                  "maximumWarning": "900mb",
+                  "maximumError": "2mb"
                 },
                 {
                   "type": "anyComponentStyle",

diff --git a/TD2/src/app/app.component.css b/TD2/src/app/app.component.css
@@ -11,51 +11,87 @@
 }
 
 nav {
-  background-color: #f2f2f2;
   padding: 10px;
 }
 
-ul {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  justify-content: space-between;
+mat-sidenav-container {
+  height: calc(100vh - 64px);
 }
 
-li {
-  margin-right: 10px;
+mat-toolbar {
+  position: fixed;
+  top: 0;
+  background-color: #004F4F;
+  z-index: 2;
 }
 
-@media screen and (max-width: 600px) {
-  ul {
-    flex-direction: column;
-  }
+mat-sidenav {
+  width: 75px;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+  transition: width 0.3s ease;
+  background-color: #303030;
+  border-radius: 0px;
+}
 
-  li {
-    margin-bottom: 10px;
+@media screen and (min-width: 600px) {
+  mat-sidenav {
+    padding-top: 4rem;
   }
 }
-.spacer {
-  flex: 1 1 auto;
+
+mat-sidenav.expanded {
+  width: 250px;
 }
-mat-toolbar{
-    position:fixed;
-    top:0;
-    z-index: 2;
+
+mat-sidenav::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 1px;
+  background-color: rgba(0, 0, 0, 0.12);
 }
 
-mat-sidenav {
-    padding-top: 3.5rem;
-
-    .entry{
-        display: flex;
-        align-items: center;
-        gap: 1rem;
-        padding:0.75rem;
-    }
-  }
+mat-sidenav-content {
+  transition: margin-left 0.3s ease;
+}
 
-.expanded {
-    width: 250px;
+mat-sidenav-content.content-shifted {
+  margin-left: 200px !important;
+}
+
+.mat-list-item {
+  height: 48px;
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+}
+
+.mat-list-item mat-icon {
+  margin-right: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+}
+
+.nav-text {
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+mat-sidenav.expanded .nav-text {
+  opacity: 1;
+}
+
+.active {
+  background-color: #004F4F;
+}
+
+.spacer {
+  flex: 1 1 auto;
 }
diff --git a/TD2/src/app/app.component.html b/TD2/src/app/app.component.html
@@ -1,6 +1,6 @@
 <mat-toolbar color="primary">
   @if (showSidebarNav) {
-  <button mat-icon-button aria-label="Menu icon" (click)="isCollapsed = !isCollapsed" >
+  <button mat-icon-button aria-label="Menu icon" (click)="toggleSidenav()" >
     <mat-icon>menu</mat-icon>
   </button>
 }
@@ -16,20 +16,29 @@
 </mat-toolbar>
 <mat-sidenav-container autosize>
   @if (showSidebarNav) {
-  <mat-sidenav [ngClass]="isCollapsed ? 'expanded' : ''" mode='side' opened='true'>
+  <mat-sidenav  mode='side' opened [ngClass]="{'expanded': !isExpanded}">
     <mat-nav-list>
-      <a mat-list-item>
-        <span class="entry">
-          <mat-icon>house</mat-icon>
-          @if (!isCollapsed) {
-            <app-sidebar-nav />
-          }
-        </span>
-      </a>
+      <nav>
+        <a mat-list-item
+            [routerLink]="['/']" [class.active]="isActiveRoute('/')">
+            <mat-icon>search</mat-icon>
+            <span class="nav-text"> Search</span>
+        </a>
+        <a mat-list-item
+            [routerLink]="['/releases']" [class.active]="isActiveRoute('/releases')">
+            <mat-icon>album</mat-icon>
+            <span class="nav-text"> Releases</span>
+        </a>
+        <a mat-list-item
+            [routerLink]="['/about']" [class.active]="isActiveRoute('/about')">
+            <mat-icon>info</mat-icon>
+            <span class="nav-text"> About</span>
+         </a>
+      </nav>
     </mat-nav-list>
   </mat-sidenav>
   }
-  <mat-sidenav-content>
+  <mat-sidenav-content [ngClass]="{'content-shifted': showSidebarNav && isExpanded}">
     <div class="app-container">
     <router-outlet />
 </div>

diff --git a/TD2/src/app/app.component.ts b/TD2/src/app/app.component.ts
@@ -1,56 +1,86 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
 import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout'
 import { NavigationPreferenceService } from './navigation-preference.service';
-import { RouterOutlet, RouterModule } from '@angular/router';
+import { Router, RouterOutlet, RouterModule, NavigationEnd, RouterLink } from '@angular/router';
+import { filter } from 'rxjs/operators';
 import {MatToolbarModule} from '@angular/material/toolbar';
 // import { SwPush } from '@angular/service-worker';
 import { SearchComponent } from './search/search.component';
-import { SidebarNavComponent } from './sidebar-nav/sidebar-nav.component';
 import { BottomNavComponent } from './bottom-nav/bottom-nav.component';
 import { Subscription } from 'rxjs';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
-import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSidenavModule, MatSidenav } from '@angular/material/sidenav';
 import { MatListModule } from '@angular/material/list';
 import { NgClass } from '@angular/common';
 
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, SearchComponent, RouterModule, SidebarNavComponent, BottomNavComponent, MatToolbarModule, MatIconModule, MatButtonModule, MatSidenavModule, MatListModule, NgClass],
+  imports: [RouterOutlet, SearchComponent, RouterModule, BottomNavComponent, MatToolbarModule, MatIconModule, MatButtonModule, MatSidenavModule, MatListModule, NgClass, RouterLink],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })
-export class AppComponent implements OnInit {
+export class AppComponent implements OnInit, OnDestroy {
+  @ViewChild('sidenav') sidenav?: MatSidenav;
+
   title = 'Tune Detective 2';
   showBottomNav = false;
   showSidebarNav = false;
-  isCollapsed = false;
+  isExpanded = true;
+  activeRoute: string = this.router.url;
   private preferenceSubscription?: Subscription;
+  private breakpointSubscription?: Subscription;
+
 
 
   constructor(
     private breakpointObserver: BreakpointObserver,
-    private navigationPreferenceService: NavigationPreferenceService
-  ) {}
+    private navigationPreferenceService: NavigationPreferenceService,
+    private router: Router,
+  ) {
+    // animation transition stuff
+    this.router.events
+      .pipe(filter(event => event instanceof NavigationEnd))
+      .subscribe(event => {
+        this.activeRoute = (event as NavigationEnd).urlAfterRedirects;
+      });
+  }
+
+  isActiveRoute(route: string): boolean {
+    return this.activeRoute === route;
+  }
 
   ngOnInit() {
-  this.breakpointObserver
-    .observe([Breakpoints.HandsetPortrait, Breakpoints.HandsetLandscape])
-    .subscribe(result => {
-      const isMobile = result.matches;
-      const initialPreference = isMobile ? 'bottom-nav' : 'sidebar-nav';
-      this.navigationPreferenceService.setPreference(initialPreference);
-      this.preferenceSubscription = this.navigationPreferenceService.preferenceChanges$.subscribe(
-        preference => {
-          this.updateNavigation(preference, isMobile);
-        }
-      );
+    this.breakpointSubscription = this.breakpointObserver
+      .observe([Breakpoints.HandsetPortrait, Breakpoints.HandsetLandscape])
+      .subscribe(result => {
+        const isMobile = result.matches;
+        const initialPreference = isMobile ? 'bottom-nav' : 'sidebar-nav';
+        this.navigationPreferenceService.setPreference(initialPreference);
+        this.preferenceSubscription = this.navigationPreferenceService.preferenceChanges$.subscribe(
+          preference => {
+            this.updateNavigation(preference, isMobile);
+          }
+        );
+      });
+  }
+
+  ngAfterViewInit() {
+    // initialize sidenav state
+    setTimeout(() => {
+      if (this.sidenav && this.showSidebarNav) {
+        this.sidenav.open();
+        this.isExpanded = false;
+      }
     });
-}
+  }
+
   ngOnDestroy() {
     this.preferenceSubscription?.unsubscribe();
+    this.breakpointSubscription?.unsubscribe();
+
   }
 
   toggleNavigationPreference() {
@@ -60,6 +90,28 @@ export class AppComponent implements OnInit {
     this.navigationPreferenceService.setPreference(newPreference);
   }
 
+  toggleSidenav() {
+    this.isExpanded = !this.isExpanded;
+    this.updateSidenavState();
+  }
+
+  private updateSidenavState() {
+    if (this.sidenav) {
+      if (this.showSidebarNav) {
+        this.sidenav.open();
+        if (!this.isExpanded) {
+          this.sidenav.mode = 'over';
+          this.sidenav.close();
+        } else {
+          this.sidenav.mode = 'side';
+          this.sidenav.open();
+        }
+      } else {
+        this.sidenav.close();
+      }
+    }
+  }
+
   private updateNavigation(preference: string | null, isMobile = false) {
     const isBottomNavPreferred = preference === 'bottom-nav';
     const isSidebarNavPreferred = preference === 'sidebar-nav';
@@ -71,5 +123,12 @@ export class AppComponent implements OnInit {
       this.showBottomNav = isBottomNavPreferred;
       this.showSidebarNav = isSidebarNavPreferred || preference === null;
     }
+
+    // Update sidenav state based on preference
+    this.updateSidenavState();
+  }
+
+  onSidenavClosed() {
+    this.isExpanded = false;
   }
 }
diff --git a/TD2/src/app/bottom-nav/bottom-nav.component.css b/TD2/src/app/bottom-nav/bottom-nav.component.css
@@ -22,5 +22,5 @@
       }
 
       .active {
-        color: #3f51b5;
+        color: #004F4F;
       }
diff --git a/TD2/src/app/sidebar-nav/sidebar-nav.component.css b/TD2/src/app/sidebar-nav/sidebar-nav.component.css
diff --git a/TD2/src/app/sidebar-nav/sidebar-nav.component.html b/TD2/src/app/sidebar-nav/sidebar-nav.component.html
diff --git a/TD2/src/app/sidebar-nav/sidebar-nav.component.spec.ts b/TD2/src/app/sidebar-nav/sidebar-nav.component.spec.ts