Sidenav not shit anymore :)

WhatTheShuck · Jun 27, 2024 · d6b31a7 · d6b31a7
1 parent 55c96e9
commit d6b31a7
Show file tree

Hide file tree

Showing 4 changed files with 148 additions and 75 deletions.
diff --git a/TD2/src/app/app.component.css b/TD2/src/app/app.component.css
@@ -14,55 +14,84 @@ nav {
   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;
-    transition: width 0.3s ease;
-    @media screen and (min-width: 600px) {
-      padding-top: 4rem;
-    }
-  width: 250px;
+mat-sidenav-content {
+  transition: margin-left 0.3s ease;
+}
 
-  }
+mat-sidenav-content.content-shifted {
+  margin-left: 200px !important;
+}
 
-mat-sidenav-content{
-    padding-top: 3.5rem;
+.mat-list-item {
+  height: 48px;
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
 }
-.expanded {
-    width: 250px;
+
+.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 {
-        color: #3f51b5;
+  background-color: #004F4F;
 }
-mat-nav-listitem {
-   flex-direction: column;
+
+.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,31 +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>
-          @if (!isCollapsed) {
-          <nav>
-<a mat-list-item
-  [routerLink]="['/']" [class.active]="isActiveRoute('/')">
-    <mat-icon>search</mat-icon>
-    Search
-</a>
-<a mat-list-item
-   [routerLink]="['/releases']" [class.active]="isActiveRoute('/releases')">
-    <mat-icon>album</mat-icon>
-    Releases
-</a>
-<a mat-list-item
-    [routerLink]="['/about']" [class.active]="isActiveRoute('/about')">
-    <mat-icon>info</mat-icon>
-    About
-  </a>
-</nav>
-          }
+      <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,4 +1,4 @@
-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 { Router, RouterOutlet, RouterModule, NavigationEnd, RouterLink } from '@angular/router';
@@ -10,7 +10,7 @@ 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';
 
@@ -22,13 +22,17 @@ import { NgClass } from '@angular/common';
   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(
@@ -44,26 +48,39 @@ export class AppComponent implements OnInit {
       });
   }
 
-   isActiveRoute(route: string): boolean {
+  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() {
@@ -73,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';
@@ -84,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;
       }