- Move the 2 features over to the top of the page

src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
+import { Router, RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatButtonModule } from '@angular/material/button';
 import { MatTabsModule } from '@angular/material/tabs';
@@ -24,42 +24,88 @@ import { PokemonService } from './core/services/pokemon.service';
     MatListModule
   ],
   template: `
-    <mat-toolbar color="primary">
-      <span>OriginDex</span>
-      <span class="spacer"></span>
-      <ng-container *ngIf="auth.isAuthenticated$ | async; else loginButtons">
+    <mat-toolbar color="primary" class="top-bar">
+      <div class="toolbar-left">
+        <span>OriginDex</span>
+      </div>
+
+      <div class="image-container">
+        <img
+          [src]="isRouteSelected('/storage-carousel') ? 'assets/images/poke_box_selected.png' : 'assets/images/poke_box.png'"
+          [routerLink]="['/storage-carousel']"
+          (mouseover)="hoveredRoute = '/storage-carousel'"
+          (mouseout)="hoveredRoute = ''"
+          class="top-bar-icon"
+        >
+        <img
+          [src]="isRouteSelected('/efficiency') ? 'assets/images/map_selected.png' : 'assets/images/map.png'"
+          [routerLink]="['/efficiency']"
+          (mouseover)="hoveredRoute = '/efficiency'"
+          (mouseout)="hoveredRoute = ''"
+          class="top-bar-icon"
+        >
+      </div>
+
+      <div class="toolbar-right" *ngIf="auth.isAuthenticated$ | async; else loginButtons">
         <span>Welcome, {{ auth.currentUser?.username }}!</span>
         <button mat-button (click)="auth.logout()">Logout</button>
-      </ng-container>
+      </div>
+
       <ng-template #loginButtons>
-        <button mat-button routerLink="/auth/login">Login</button>
-        <button mat-button routerLink="/auth/register">Register</button>
+        <div class="toolbar-right">
+          <button mat-button routerLink="/auth/login">Login</button>
+          <button mat-button routerLink="/auth/register">Register</button>
+        </div>
       </ng-template>
     </mat-toolbar>
 
-    <mat-sidenav-container class="content-container">
-      <mat-sidenav mode="side" opened>
-        <mat-nav-list>
-          <a mat-list-item routerLink="/storage-carousel" routerLinkActive="active">
-            Storage Carousel
-          </a>
-          <a mat-list-item routerLink="/efficiency" routerLinkActive="active">
-            Efficiency Plan
-          </a>
-        </mat-nav-list>
-      </mat-sidenav>
-      <mat-sidenav-content>
-        <div class="content">
-          <router-outlet></router-outlet>
-        </div>
-      </mat-sidenav-content>
-    </mat-sidenav-container>
+
+    <div class="content">
+      <router-outlet></router-outlet>
+    </div>
   `,
   styles: [`
-    .spacer {
-      flex: 1 1 auto;
+    .top-bar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+    }
+
+    .toolbar-left {
+      display: flex;
+      align-items: center;
+      flex: 1;
+    }
+
+    .image-container {
+      display: flex;
+      align-items: center;
+      gap: 16px; /* Space between images */
+      flex: 0;   /* Do not grow or shrink */
     }
 
+    .toolbar-right {
+      display: flex;
+      align-items: center;
+      gap: 8px;  /* Space between the welcome message and buttons */
+      flex: 1;
+      justify-content: flex-end;
+    }
+
+    .top-bar-icon {
+      cursor: pointer;
+      height: 48px; /* Adjust as needed */
+      width: auto;   /* Maintain aspect ratio */
+      transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition effect */
+    }
+
+    .top-bar-icon:hover {
+      transform: scale(1.1); /* Slightly enlarge the image on hover */
+    }
+
+
+
     mat-toolbar {
       margin-bottom: 0;
     }
@@ -94,10 +140,16 @@ import { PokemonService } from './core/services/pokemon.service';
   `]
 })
 export class AppComponent {
+  hoveredRoute: string = '';
   constructor(
     public auth: AuthService,
-    public pokemonService: PokemonService
+    public pokemonService: PokemonService,
+    private router: Router
   ) {
     this.pokemonService.initializeCaughtPokemon();
   }
+
+  isRouteSelected(route: string): boolean {
+    return this.router.url === route || this.hoveredRoute === route;
+  }
 }

src/app/features/plan/plan-pokemon/plan-pokemon.component.ts

@@ -95,7 +95,6 @@ interface PokemonStatusEvent {
                   </div>
                   <mat-chip-listbox>
                     <mat-chip>Method _PLACEDHOLDER_</mat-chip>
-                    <mat-chip color="primary" selected>Need: {{ 1 }}</mat-chip>
                   </mat-chip-listbox>
                 </div>
               </div>
@@ -126,7 +125,6 @@ interface PokemonStatusEvent {
                   </div>
                   <mat-chip-listbox>
                     <mat-chip>Breed</mat-chip>
-                    <mat-chip color="primary" selected>Need: {{ 1 }}</mat-chip>
                   </mat-chip-listbox>
                 </div>
               </div>
@@ -277,7 +275,8 @@ export class PlanPokemonComponent {
     this.representative_pokemon = null;
     this.evolve_to = []
     this.breed_for = []
-    
+    this.cdr.detectChanges();
+
     this.pokemonService.getPokemonFromPFIC(this.pokemon_family.representative).subscribe({
       next: (pokemon) => {
         this.representative_pokemon = pokemon
@@ -338,6 +337,7 @@ export class PlanPokemonComponent {
     this.representative_pokemon = null;
     this.evolve_to = []
     this.breed_for = []
+    this.cdr.detectChanges();
 
     this.pokemonService.getPokemonFromPFIC(this.pokemon_family.representative).subscribe({
       next: (pokemon) => {