That was a lot easier than anticipated...

Man I'm stupid

TD2/angular.json

@@ -36,8 +36,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kb",
-                  "maximumError": "1mb"
+                  "maximumWarning": "900mb",
+                  "maximumError": "2mb"
                 },
                 {
                   "type": "anyComponentStyle",

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;
+}

TD2/src/app/app.component.html

@@ -18,14 +18,25 @@
   @if (showSidebarNav) {
   <mat-sidenav [ngClass]="isCollapsed ? 'expanded' : ''" mode='side' opened='true'>
     <mat-nav-list>
-      <a mat-list-item>
-        <span class="entry">
-          <mat-icon>house</mat-icon>
           @if (!isCollapsed) {
-            <app-sidebar-nav />
+          <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>
           }
-        </span>
-      </a>
     </mat-nav-list>
   </mat-sidenav>
   }

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