From 58521659d2cf67526d9dee7bcf487ca76c5207ec Mon Sep 17 00:00:00 2001
From: Jiya Gupta <coderaholic21@gmail.com>
Date: Thu, 20 Mar 2025 02:05:31 +0530
Subject: [PATCH] feat: Highlight Active Sidebar Menu Item

---
 .../core/shell/sidenav/sidenav.component.html    | 16 ++++++++++++++++
 .../core/shell/sidenav/sidenav.component.scss    |  4 ++++
 2 files changed, 20 insertions(+)

diff --git a/src/app/core/shell/sidenav/sidenav.component.html b/src/app/core/shell/sidenav/sidenav.component.html
index 009846753..0f4eb42c2 100644
--- a/src/app/core/shell/sidenav/sidenav.component.html
+++ b/src/app/core/shell/sidenav/sidenav.component.html
@@ -62,6 +62,8 @@
           [routerLink]="['/dashboard']"
           [matTooltipPosition]="tooltipPosition"
           matTooltip="{{ 'tooltips.Dashboard' | translate }}"
+          routerLinkActive="active-menu"
+          [routerLinkActiveOptions]="{ exact: false }"
         >
           <mat-icon matListIcon>
             <fa-icon icon="tachometer-alt" size="sm"></fa-icon>
@@ -72,6 +74,8 @@
           [routerLink]="['/navigation']"
           [matTooltipPosition]="tooltipPosition"
           matTooltip="{{ 'tooltips.Navigation' | translate }}"
+          routerLinkActive="active-menu"
+          [routerLinkActiveOptions]="{ exact: false }"
         >
           <mat-icon matListIcon>
             <fa-icon icon="location-arrow" size="sm"></fa-icon>
@@ -82,6 +86,8 @@
           [routerLink]="['/checker-inbox-and-tasks/checker-inbox']"
           [matTooltipPosition]="tooltipPosition"
           matTooltip="{{ 'tooltips.Checker Inbox and Tasks' | translate }}"
+          routerLinkActive="active-menu"
+          [routerLinkActiveOptions]="{ exact: false }"
         >
           <mat-icon matListIcon>
             <i class="fa fa-check"></i>
@@ -92,6 +98,8 @@
           [routerLink]="['/collections/individual-collection-sheet']"
           [matTooltipPosition]="tooltipPosition"
           matTooltip="{{ 'tooltips.Individual Collection Sheet' | translate }}"
+          routerLinkActive="active-menu"
+          [routerLinkActiveOptions]="{ exact: false }"
         >
           <mat-icon matListIcon>
             <i class="fa fa-tasks"></i>
@@ -102,6 +110,8 @@
           [routerLink]="['/notifications']"
           [matTooltipPosition]="tooltipPosition"
           matTooltip="{{ 'tooltips.Notifications' | translate }}"
+          routerLinkActive="active-menu"
+          [routerLinkActiveOptions]="{ exact: false }"
         >
           <mat-icon matListIcon>
             <fa-icon icon="bell" size="sm"></fa-icon>
@@ -112,6 +122,8 @@
           [routerLink]="['/accounting/journal-entries/frequent-postings']"
           [matTooltipPosition]="tooltipPosition"
           matTooltip="{{ 'tooltips.Frequent Postings' | translate }}"
+          routerLinkActive="active-menu"
+          [routerLinkActiveOptions]="{ exact: false }"
         >
           <mat-icon matListIcon>
             <fa-icon icon="sync" size="sm"></fa-icon>
@@ -122,6 +134,8 @@
           [routerLink]="['/accounting/journal-entries/create']"
           [matTooltipPosition]="tooltipPosition"
           matTooltip="{{ 'tooltips.Create Journal Entry' | translate }}"
+          routerLinkActive="active-menu"
+          [routerLinkActiveOptions]="{ exact: false }"
         >
           <mat-icon matListIcon>
             <fa-icon icon="plus" size="sm"></fa-icon>
@@ -132,6 +146,8 @@
           [routerLink]="['/accounting/chart-of-accounts']"
           [matTooltipPosition]="tooltipPosition"
           matTooltip="{{ 'tooltips.Chart Of Accounts' | translate }}"
+          routerLinkActive="active-menu"
+          [routerLinkActiveOptions]="{ exact: false }"
         >
           <mat-icon matListIcon>
             <fa-icon icon="sitemap" size="sm"></fa-icon>
diff --git a/src/app/core/shell/sidenav/sidenav.component.scss b/src/app/core/shell/sidenav/sidenav.component.scss
index 2cd594233..263558cbf 100644
--- a/src/app/core/shell/sidenav/sidenav.component.scss
+++ b/src/app/core/shell/sidenav/sidenav.component.scss
@@ -180,3 +180,7 @@
     }
   }
 }
+
+.active-menu {
+  background-color: #e0e0e0;
+}