feat: Highlight Active Sidebar Menu Item

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>

src/app/core/shell/sidenav/sidenav.component.scss

@@ -180,3 +180,7 @@
     }
   }
 }
+
+.active-menu {
+  background-color: #e0e0e0;
+}