From ec5c281cfd6881e79de1fc75f2b5efcb43437cfe Mon Sep 17 00:00:00 2001
From: Tony Yin <changyu.yin@outlook.com>
Date: Mon, 30 Dec 2024 13:45:38 +0800
Subject: [PATCH] Implemented feature to highlight active route nav item.

---
 angular.json                                       |  5 +++++
 projects/dev-app/src/app/app.component.html        | 14 ++++++++++----
 projects/dev-app/src/index.html                    |  2 +-
 .../src/lib/nested-nav-list.component.html         |  1 +
 .../src/lib/nested-nav-list.component.scss         |  5 +++++
 .../src/lib/nested-nav-list.component.ts           |  7 +++++++
 6 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/angular.json b/angular.json
index 74f17d6..c3e9ffb 100644
--- a/angular.json
+++ b/angular.json
@@ -73,6 +73,11 @@
               {
                 "glob": "**/*",
                 "input": "projects/dev-app/public"
+              },
+              {
+                "glob": "logo.svg",
+                "input": "projects/nested-nav-list",
+                "output": "."
               }
             ],
             "stylePreprocessorOptions": {
diff --git a/projects/dev-app/src/app/app.component.html b/projects/dev-app/src/app/app.component.html
index 36e60c1..ffdc29b 100644
--- a/projects/dev-app/src/app/app.component.html
+++ b/projects/dev-app/src/app/app.component.html
@@ -1,6 +1,12 @@
 <h1>Angular Material Nested Navigation List</h1>
-<mat-slide-toggle [(ngModel)]="keepSvgIconColor">Keep Svg Icon Color: {{keepSvgIconColor}}</mat-slide-toggle>
-<ngx-nested-nav-list [navData]="navData" [keepSvgIconColor]="keepSvgIconColor"></ngx-nested-nav-list>
+<mat-slide-toggle [(ngModel)]="keepSvgIconColor"
+  >Keep Svg Icon Color: {{ keepSvgIconColor }}</mat-slide-toggle
+>
+<ngx-nested-nav-list
+  [navData]="navData"
+  [keepSvgIconColor]="keepSvgIconColor"
+  [highlightActiveItem]="true"
+></ngx-nested-nav-list>
 <div>
-    <router-outlet></router-outlet>
-</div>
\ No newline at end of file
+  <router-outlet></router-outlet>
+</div>
diff --git a/projects/dev-app/src/index.html b/projects/dev-app/src/index.html
index d67c532..e3951b2 100644
--- a/projects/dev-app/src/index.html
+++ b/projects/dev-app/src/index.html
@@ -5,7 +5,7 @@
     <title>DevApp</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="icon" type="image/svg+xml" href="logo.svg" />
     <link
       href="https://fonts.googleapis.com/icon?family=Material+Icons"
       rel="stylesheet"
diff --git a/projects/nested-nav-list/src/lib/nested-nav-list.component.html b/projects/nested-nav-list/src/lib/nested-nav-list.component.html
index 9c2b398..ed06382 100644
--- a/projects/nested-nav-list/src/lib/nested-nav-list.component.html
+++ b/projects/nested-nav-list/src/lib/nested-nav-list.component.html
@@ -14,6 +14,7 @@
         <mat-list-item
           (click)="onClickNavItem(navItem, $event)"
           [ngStyle]="{ 'padding-left.px': level * nestedIndent }"
+          [class.active]="highlightActiveItem && isActiveItem(navItem)"
         >
           @switch (navItem.iconType) {
             @case ('svg') {
diff --git a/projects/nested-nav-list/src/lib/nested-nav-list.component.scss b/projects/nested-nav-list/src/lib/nested-nav-list.component.scss
index 837f15c..1fcc28a 100644
--- a/projects/nested-nav-list/src/lib/nested-nav-list.component.scss
+++ b/projects/nested-nav-list/src/lib/nested-nav-list.component.scss
@@ -19,4 +19,9 @@
   [matlistitemicon] {
     display: flex;
   }
+
+  mat-list-item.active {
+    background-color: var(--mat-selected-item-background, rgba(0, 0, 0, 0.08));
+    color: var(--mat-selected-item-color, rgba(0, 0, 0, 0.87));
+  }
 }
diff --git a/projects/nested-nav-list/src/lib/nested-nav-list.component.ts b/projects/nested-nav-list/src/lib/nested-nav-list.component.ts
index 581cf83..4b579bd 100644
--- a/projects/nested-nav-list/src/lib/nested-nav-list.component.ts
+++ b/projects/nested-nav-list/src/lib/nested-nav-list.component.ts
@@ -29,6 +29,8 @@ export class NestedNavListComponent implements OnChanges {
   @Input() navData: NavData[] = [];
   @Input() nestedIndent: number = 16;
   @Input() keepSvgIconColor: boolean = false;
+  @Input() highlightActiveItem: boolean = false;
+  @Input() isActiveItem: (item: NavData) => boolean = this.defaultIsActiveItem;
 
   transformedNavData: NavData[] = [];
 
@@ -88,4 +90,9 @@ export class NestedNavListComponent implements OnChanges {
       item.expanded = !item.expanded;
     }
   }
+
+  defaultIsActiveItem(item: NavData): boolean {
+    const currentUrl = this.router.url.split('?')[0]; // Exclude query parameters
+    return item.route !== undefined && currentUrl.endsWith(item.route || '');
+  }
 }