Keep current menu item active

apps/client/src/app/app.component.ts

@@ -57,9 +57,8 @@ export class AppComponent implements OnDestroy, OnInit {
 
     this.router.events
       .pipe(filter((event) => event instanceof NavigationEnd))
-      .subscribe((test) => {
+      .subscribe(() => {
         this.currentRoute = this.router.url.toString().substring(1);
-        // this.initializeTheme();
       });
 
     this.tokenStorageService

apps/client/src/app/components/header/header.component.html

@@ -9,7 +9,7 @@
       [routerLink]="['/']"
       i18n
       mat-flat-button
-      [color]="currentRoute === 'home' ? 'primary' : null"
+      [color]="currentRoute?.startsWith('home') ? 'primary' : null"
       >Overview</a
     >
     <a
@@ -17,7 +17,7 @@
       [routerLink]="['/analysis']"
       i18n
       mat-flat-button
-      [color]="currentRoute === 'analysis' ? 'primary' : null"
+      [color]="currentRoute?.startsWith('analysis') ? 'primary' : null"
       >Analysis</a
     >
     <a
@@ -25,7 +25,7 @@
       [routerLink]="['/report']"
       i18n
       mat-flat-button
-      [color]="currentRoute === 'report' ? 'primary' : null"
+      [color]="currentRoute?.startsWith('report') ? 'primary' : null"
       >X-ray</a
     >
     <a
@@ -33,7 +33,7 @@
       [routerLink]="['/transactions']"
       i18n
       mat-flat-button
-      [color]="currentRoute === 'transactions' ? 'primary' : null"
+      [color]="currentRoute?.startsWith('transactions') ? 'primary' : null"
       >Transactions</a
     >
     <a
@@ -41,7 +41,7 @@
       [routerLink]="['/accounts']"
       i18n
       mat-flat-button
-      [color]="currentRoute === 'accounts' ? 'primary' : null"
+      [color]="currentRoute?.startsWith('accounts') ? 'primary' : null"
       >Accounts</a
     >
     <a
@@ -50,7 +50,7 @@
       [routerLink]="['/admin']"
       i18n
       mat-flat-button
-      [color]="currentRoute === 'admin' ? 'primary' : null"
+      [color]="currentRoute?.startsWith('admin') ? 'primary' : null"
       >Admin Control</a
     >
     <a
@@ -58,7 +58,7 @@
       [routerLink]="['/resources']"
       i18n
       mat-flat-button
-      [color]="currentRoute === 'resources' ? 'primary' : null"
+      [color]="currentRoute?.startsWith('resources') ? 'primary' : null"
       >Resources</a
     >
     <a
@@ -66,7 +66,7 @@
       [routerLink]="['/about']"
       i18n
       mat-flat-button
-      [color]="currentRoute === 'about' ? 'primary' : null"
+      [color]="currentRoute?.startsWith('about') ? 'primary' : null"
       >About</a
     >
     <button
@@ -130,7 +130,7 @@
         [routerLink]="['/analysis']"
         i18n
         mat-menu-item
-        [ngClass]="{ 'font-weight-bold': currentRoute === 'analysis' }"
+        [ngClass]="{ 'font-weight-bold': currentRoute?.startsWith('analysis') }"
         >Analysis</a
       >
       <a
@@ -138,7 +138,7 @@
         [routerLink]="['/report']"
         i18n
         mat-menu-item
-        [ngClass]="{ 'font-weight-bold': currentRoute === 'report' }"
+        [ngClass]="{ 'font-weight-bold': currentRoute?.startsWith('report') }"
         >X-ray</a
       >
       <a
@@ -146,7 +146,9 @@
         [routerLink]="['/transactions']"
         i18n
         mat-menu-item
-        [ngClass]="{ 'font-weight-bold': currentRoute === 'transactions' }"
+        [ngClass]="{
+          'font-weight-bold': currentRoute?.startsWith('transactions')
+        }"
         >Transactions</a
       >
       <a
@@ -154,7 +156,7 @@
         [routerLink]="['/accounts']"
         i18n
         mat-menu-item
-        [ngClass]="{ 'font-weight-bold': currentRoute === 'accounts' }"
+        [ngClass]="{ 'font-weight-bold': currentRoute?.startsWith('accounts') }"
         >Accounts</a
       >
       <a
@@ -162,7 +164,7 @@
         [routerLink]="['/account']"
         i18n
         mat-menu-item
-        [ngClass]="{ 'font-weight-bold': currentRoute === 'account' }"
+        [ngClass]="{ 'font-weight-bold': currentRoute?.startsWith('account') }"
         >Ghostfolio Account</a
       >
       <a
@@ -171,7 +173,7 @@
         [routerLink]="['/admin']"
         i18n
         mat-menu-item
-        [ngClass]="{ 'font-weight-bold': currentRoute === 'admin' }"
+        [ngClass]="{ 'font-weight-bold': currentRoute?.startsWith('admin') }"
         >Admin Control</a
       >
       <hr class="m-0" />
@@ -180,7 +182,9 @@
         [routerLink]="['/resources']"
         i18n
         mat-menu-item
-        [ngClass]="{ 'font-weight-bold': currentRoute === 'resources' }"
+        [ngClass]="{
+          'font-weight-bold': currentRoute?.startsWith('resources')
+        }"
         >Resources</a
       >
       <a
@@ -188,7 +192,7 @@
         [routerLink]="['/about']"
         i18n
         mat-menu-item
-        [ngClass]="{ 'font-weight-bold': currentRoute === 'about' }"
+        [ngClass]="{ 'font-weight-bold': currentRoute?.startsWith('about') }"
         >About Ghostfolio</a
       >
       <hr class="d-block d-sm-none m-0" />
@@ -210,7 +214,7 @@
       [routerLink]="['/about']"
       i18n
       mat-flat-button
-      [color]="currentRoute === 'about' ? 'primary' : null"
+      [color]="currentRoute?.startsWith('about') ? 'primary' : null"
       >About</a
     >
     <a