From 062344f65ddb420f30861f47162ee690f1857813 Mon Sep 17 00:00:00 2001
From: Igor Propisnov <info@igor-propisnov.com>
Date: Thu, 18 Jul 2024 16:22:33 +0200
Subject: [PATCH] set active state to nav

---
 .../dashboard-root.component.html             | 11 +++++--
 .../dashboard-root.component.ts               | 31 +++++++++++++++++--
 2 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/pages/dashboard-root/dashboard-root.component.html b/frontend/src/app/pages/dashboard-root/dashboard-root.component.html
index e7728ac..d337baf 100644
--- a/frontend/src/app/pages/dashboard-root/dashboard-root.component.html
+++ b/frontend/src/app/pages/dashboard-root/dashboard-root.component.html
@@ -56,7 +56,12 @@
     </div>
     <ul class="m-1">
       <li
-        class="hover:bg-accent-content cursor-pointer hover:text-accent text-primary-content rounded-btn"
+        class="cursor-pointer rounded-btn"
+        [ngClass]="{
+          'bg-base-100 text-primary': item.active,
+          'text-primary-content hover:text-base-content': !item.active
+        }"
+        (click)="setActive(item)"
         *ngFor="let item of menuItems">
         <div
           class="flex justify-center p-2"
@@ -65,9 +70,9 @@
         </div>
 
         <div
-          class="flex items-center rounded-btn justify-between cursor-pointer px-1 py-2 hover:bg-accent-content hover:text-accent text-primary-content"
+          class="flex items-center rounded-btn justify-between cursor-pointer px-1 py-2"
           *ngIf="!isDesktopCollapsed || showMobileMenu">
-          <div class="flex items-center hover:bold">
+          <div class="flex items-center">
             <span [innerHTML]="item.icon" class="mx-2"></span>
             <span>{{ item.name }}</span>
           </div>
diff --git a/frontend/src/app/pages/dashboard-root/dashboard-root.component.ts b/frontend/src/app/pages/dashboard-root/dashboard-root.component.ts
index 2da5013..82b2aba 100644
--- a/frontend/src/app/pages/dashboard-root/dashboard-root.component.ts
+++ b/frontend/src/app/pages/dashboard-root/dashboard-root.component.ts
@@ -6,11 +6,12 @@ import {
   OnInit,
 } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { Router, ActivatedRoute } from '@angular/router';
 
 interface MenuItem {
   name: string;
   icon: SafeHtml;
-  open?: boolean;
+  route: string;
   active?: boolean;
 }
 
@@ -31,6 +32,7 @@ export class DashboardRootComponent implements OnInit {
   public menuItems: MenuItem[] = [
     {
       name: 'Dashboard',
+      route: '/dashboard',
       icon: this.sanitizer
         .bypassSecurityTrustHtml(`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
         <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
@@ -38,9 +40,19 @@ export class DashboardRootComponent implements OnInit {
     },
   ];
 
-  public constructor(private sanitizer: DomSanitizer) {}
+  public constructor(
+    private readonly sanitizer: DomSanitizer,
+    private readonly router: Router,
+    private readonly route: ActivatedRoute
+  ) {}
 
   public ngOnInit(): void {
+    this.setActiveItemBasedOnRoute();
+    this.router.events.subscribe(() => {
+      console.log('router event');
+
+      this.setActiveItemBasedOnRoute();
+    });
     this.onResize();
   }
 
@@ -69,4 +81,19 @@ export class DashboardRootComponent implements OnInit {
   public toggleDesktopSidebar(): void {
     this.isDesktopCollapsed = !this.isDesktopCollapsed;
   }
+
+  public setActive(item: MenuItem): void {
+    this.menuItems.forEach((menu: MenuItem) => {
+      menu.active = false;
+    });
+    item.active = true;
+  }
+
+  private setActiveItemBasedOnRoute(): void {
+    const url = this.router.url;
+
+    this.menuItems.forEach((item: MenuItem) => {
+      item.active = url.startsWith(item.route);
+    });
+  }
 }