fix: issue with async nav lists not updating correctly

Author: jake-bassett

projects/components/src/navigation/navigation-list.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { IconType } from '@hypertrace/assets-library';
 import { Color, NavigationService } from '@hypertrace/common';
@@ -25,7 +25,7 @@ import { IconSize } from '../icon/icon-size';
             <hr *ngSwitchCase="'${NavItemType.Divider}'" class="nav-divider" />
 
             <ng-container *ngSwitchCase="'${NavItemType.Link}'">
-              <ht-nav-item [config]="item" [active]="item === activeItem" [collapsed]="this.collapsed"> </ht-nav-item>
+              <ht-nav-item [config]="item" [active]="item === activeItem" [collapsed]="this.collapsed"></ht-nav-item>
             </ng-container>
           </ng-container>
         </ng-container>
@@ -48,7 +48,7 @@ import { IconSize } from '../icon/icon-size';
     </nav>
   `
 })
-export class NavigationListComponent {
+export class NavigationListComponent implements OnChanges {
   @Input()
   public navItems: NavItemConfig[] = [];
 
@@ -64,12 +64,14 @@ export class NavigationListComponent {
   @Output()
   public readonly collapsedChange: EventEmitter<boolean> = new EventEmitter();
 
-  public readonly activeItem$: Observable<NavItemLinkConfig | undefined>;
+  public activeItem$?: Observable<NavItemLinkConfig | undefined>;
 
   public constructor(
     private readonly navigationService: NavigationService,
     private readonly activatedRoute: ActivatedRoute
-  ) {
+  ) {}
+
+  public ngOnChanges(): void {
     this.activeItem$ = this.navigationService.navigation$.pipe(
       startWith(this.navigationService.getCurrentActivatedRoute()),
       map(() => this.findActiveItem(this.navItems))