Implemented feature to highlight active route nav item.

tony21921 · Dec 30, 2024 · ec5c281 · ec5c281
1 parent 3337ae5
commit ec5c281
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 5 deletions.
diff --git 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
@@ -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>
+  <router-outlet></router-outlet>
+</div>
diff --git 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
@@ -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
@@ -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
@@ -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 || '');
+  }
 }