From 55c96e9fc05ae78fe53c21d701278d0d14fd295a Mon Sep 17 00:00:00 2001 From: Brandon Date: Wed, 26 Jun 2024 22:26:59 +1000 Subject: [PATCH 1/2] That was a lot easier than anticipated... Man I'm stupid --- TD2/angular.json | 4 +- TD2/src/app/app.component.css | 21 +++++++---- TD2/src/app/app.component.html | 23 +++++++++--- TD2/src/app/app.component.ts | 23 +++++++++--- .../app/sidebar-nav/sidebar-nav.component.css | 0 .../sidebar-nav/sidebar-nav.component.html | 37 ------------------- .../sidebar-nav/sidebar-nav.component.spec.ts | 23 ------------ .../app/sidebar-nav/sidebar-nav.component.ts | 31 ---------------- 8 files changed, 51 insertions(+), 111 deletions(-) delete mode 100644 TD2/src/app/sidebar-nav/sidebar-nav.component.css delete mode 100644 TD2/src/app/sidebar-nav/sidebar-nav.component.html delete mode 100644 TD2/src/app/sidebar-nav/sidebar-nav.component.spec.ts delete mode 100644 TD2/src/app/sidebar-nav/sidebar-nav.component.ts diff --git a/TD2/angular.json b/TD2/angular.json index 4573d8a..143f740 100644 --- 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 index 100ea4e..47f54b7 100644 --- a/TD2/src/app/app.component.css +++ b/TD2/src/app/app.component.css @@ -11,7 +11,6 @@ } nav { - background-color: #f2f2f2; padding: 10px; } @@ -47,15 +46,23 @@ mat-toolbar{ mat-sidenav { padding-top: 3.5rem; - - .entry{ - display: flex; - align-items: center; - gap: 1rem; - padding:0.75rem; + transition: width 0.3s ease; + @media screen and (min-width: 600px) { + padding-top: 4rem; } + width: 250px; + } +mat-sidenav-content{ + padding-top: 3.5rem; +} .expanded { width: 250px; } +.active { + color: #3f51b5; +} +mat-nav-listitem { + flex-direction: column; +} diff --git a/TD2/src/app/app.component.html b/TD2/src/app/app.component.html index 7d5d513..76bd699 100644 --- a/TD2/src/app/app.component.html +++ b/TD2/src/app/app.component.html @@ -18,14 +18,25 @@ @if (showSidebarNav) { - - - house @if (!isCollapsed) { - + } - - } diff --git a/TD2/src/app/app.component.ts b/TD2/src/app/app.component.ts index 71465b7..c47b67c 100644 --- a/TD2/src/app/app.component.ts +++ b/TD2/src/app/app.component.ts @@ -1,11 +1,11 @@ import { Component, OnInit } 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'; @@ -18,7 +18,7 @@ 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' }) @@ -27,13 +27,26 @@ export class AppComponent implements OnInit { showBottomNav = false; showSidebarNav = false; isCollapsed = false; + activeRoute: string = this.router.url; private preferenceSubscription?: 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 diff --git a/TD2/src/app/sidebar-nav/sidebar-nav.component.css b/TD2/src/app/sidebar-nav/sidebar-nav.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/TD2/src/app/sidebar-nav/sidebar-nav.component.html b/TD2/src/app/sidebar-nav/sidebar-nav.component.html deleted file mode 100644 index f5b0524..0000000 --- a/TD2/src/app/sidebar-nav/sidebar-nav.component.html +++ /dev/null @@ -1,37 +0,0 @@ - -
Side Works!
- diff --git a/TD2/src/app/sidebar-nav/sidebar-nav.component.spec.ts b/TD2/src/app/sidebar-nav/sidebar-nav.component.spec.ts deleted file mode 100644 index 3e300e6..0000000 --- a/TD2/src/app/sidebar-nav/sidebar-nav.component.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { SidebarNavComponent } from './sidebar-nav.component'; - -describe('SidebarNavComponent', () => { - let component: SidebarNavComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [SidebarNavComponent] - }) - .compileComponents(); - - fixture = TestBed.createComponent(SidebarNavComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/TD2/src/app/sidebar-nav/sidebar-nav.component.ts b/TD2/src/app/sidebar-nav/sidebar-nav.component.ts deleted file mode 100644 index 06cdee8..0000000 --- a/TD2/src/app/sidebar-nav/sidebar-nav.component.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { Component } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { MatIconModule } from '@angular/material/icon'; -import { Router, RouterLink, NavigationEnd } from '@angular/router'; -import { filter } from 'rxjs/operators'; - - -@Component({ - selector: 'app-sidebar-nav', - standalone: true, - imports: [RouterLink, CommonModule, MatIconModule ], - templateUrl: './sidebar-nav.component.html', - styleUrl: './sidebar-nav.component.css' -}) -export class SidebarNavComponent { -activeRoute: string = this.router.url; - - constructor(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; - } -} - From d6b31a7d35d13a3e3d65cfca3b209657691bc76c Mon Sep 17 00:00:00 2001 From: Brandon Date: Thu, 27 Jun 2024 22:51:01 +1000 Subject: [PATCH 2/2] Sidenav not shit anymore :) --- TD2/src/app/app.component.css | 99 ++++++++++++------- TD2/src/app/app.component.html | 42 ++++---- TD2/src/app/app.component.ts | 80 +++++++++++---- .../app/bottom-nav/bottom-nav.component.css | 2 +- 4 files changed, 148 insertions(+), 75 deletions(-) diff --git a/TD2/src/app/app.component.css b/TD2/src/app/app.component.css index 47f54b7..c3a8e1b 100644 --- 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 index 76bd699..a5309ad 100644 --- a/TD2/src/app/app.component.html +++ b/TD2/src/app/app.component.html @@ -1,6 +1,6 @@ @if (showSidebarNav) { - } @@ -16,31 +16,29 @@ @if (showSidebarNav) { - + - @if (!isCollapsed) { - - } + } - +
diff --git a/TD2/src/app/app.component.ts b/TD2/src/app/app.component.ts index c47b67c..cd59c14 100644 --- 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 index c3e6833..c7b46b2 100644 --- 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; }