Feature/refactor active menu item state (#91)

* Refactor active menu item state

* Update changelog

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Changed
+
+- Refactored the active menu item state by parsing the current url
+
 ### Fixed
 
 - Fixed the link to the pricing page

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

@@ -5,7 +5,7 @@ import {
   OnDestroy,
   OnInit
 } from '@angular/core';
-import { NavigationEnd, Router } from '@angular/router';
+import { NavigationEnd, PRIMARY_OUTLET, Router } from '@angular/router';
 import { InfoItem } from '@ghostfolio/api/app/info/interfaces/info-item.interface';
 import { User } from '@ghostfolio/api/app/user/interfaces/user.interface';
 import {
@@ -58,7 +58,10 @@ export class AppComponent implements OnDestroy, OnInit {
     this.router.events
       .pipe(filter((event) => event instanceof NavigationEnd))
       .subscribe(() => {
-        this.currentRoute = this.router.url.toString().substring(1);
+        const urlTree = this.router.parseUrl(this.router.url);
+        const urlSegmentGroup = urlTree.root.children[PRIMARY_OUTLET];
+        const urlSegments = urlSegmentGroup.segments;
+        this.currentRoute = urlSegments[0].path;
       });
 
     this.tokenStorageService
@@ -84,6 +87,16 @@ export class AppComponent implements OnDestroy, OnInit {
       });
   }
 
+  public onCreateAccount() {
+    this.tokenStorageService.signOut();
+    window.location.reload();
+  }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+
   private initializeTheme() {
     this.materialCssVarsService.setDarkTheme(
       window.matchMedia('(prefers-color-scheme: dark)').matches
@@ -96,14 +109,4 @@ export class AppComponent implements OnDestroy, OnInit {
     this.materialCssVarsService.setPrimaryColor(primaryColorHex);
     this.materialCssVarsService.setAccentColor(secondaryColorHex);
   }
-
-  public onCreateAccount() {
-    this.tokenStorageService.signOut();
-    window.location.reload();
-  }
-
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
 }

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

@@ -8,7 +8,7 @@
       class="d-none d-sm-block"
       i18n
       mat-flat-button
-      [color]="currentRoute?.startsWith('home') ? 'primary' : null"
+      [color]="currentRoute === 'home' ? 'primary' : null"
       [routerLink]="['/']"
       >Overview</a
     >
@@ -16,7 +16,7 @@
       class="d-none d-sm-block mx-1"
       i18n
       mat-flat-button
-      [color]="currentRoute?.startsWith('analysis') ? 'primary' : null"
+      [color]="currentRoute === 'analysis' ? 'primary' : null"
       [routerLink]="['/analysis']"
       >Analysis</a
     >
@@ -24,7 +24,7 @@
       class="d-none d-sm-block mx-1"
       i18n
       mat-flat-button
-      [color]="currentRoute?.startsWith('report') ? 'primary' : null"
+      [color]="currentRoute === 'report' ? 'primary' : null"
       [routerLink]="['/report']"
       >X-ray</a
     >
@@ -32,7 +32,7 @@
       class="d-none d-sm-block mx-1"
       i18n
       mat-flat-button
-      [color]="currentRoute?.startsWith('transactions') ? 'primary' : null"
+      [color]="currentRoute === 'transactions' ? 'primary' : null"
       [routerLink]="['/transactions']"
       >Transactions</a
     >
@@ -40,7 +40,7 @@
       class="d-none d-sm-block mx-1"
       i18n
       mat-flat-button
-      [color]="currentRoute?.startsWith('accounts') ? 'primary' : null"
+      [color]="currentRoute === 'accounts' ? 'primary' : null"
       [routerLink]="['/accounts']"
       >Accounts</a
     >
@@ -49,7 +49,7 @@
       class="d-none d-sm-block mx-1"
       i18n
       mat-flat-button
-      [color]="currentRoute?.startsWith('admin') ? 'primary' : null"
+      [color]="currentRoute === 'admin' ? 'primary' : null"
       [routerLink]="['/admin']"
       >Admin Control</a
     >
@@ -57,7 +57,7 @@
       class="d-none d-sm-block mx-1"
       i18n
       mat-flat-button
-      [color]="currentRoute?.startsWith('resources') ? 'primary' : null"
+      [color]="currentRoute === 'resources' ? 'primary' : null"
       [routerLink]="['/resources']"
       >Resources</a
     >
@@ -66,7 +66,7 @@
       class="d-none d-sm-block mx-1"
       i18n
       mat-flat-button
-      [color]="currentRoute?.startsWith('pricing') ? 'primary' : null"
+      [color]="currentRoute === 'pricing' ? 'primary' : null"
       [routerLink]="['/pricing']"
       >Pricing</a
     >
@@ -74,7 +74,7 @@
       class="d-none d-sm-block mx-1"
       i18n
       mat-flat-button
-      [color]="currentRoute?.startsWith('about') ? 'primary' : null"
+      [color]="currentRoute === 'about' ? 'primary' : null"
       [routerLink]="['/about']"
       >About</a
     >
@@ -138,7 +138,7 @@
         class="d-block d-sm-none"
         i18n
         mat-menu-item
-        [ngClass]="{ 'font-weight-bold': currentRoute?.startsWith('analysis') }"
+        [ngClass]="{ 'font-weight-bold': currentRoute === 'analysis' }"
         [routerLink]="['/analysis']"
         >Analysis</a
       >
@@ -146,7 +146,7 @@
         class="d-block d-sm-none"
         i18n
         mat-menu-item
-        [ngClass]="{ 'font-weight-bold': currentRoute?.startsWith('report') }"
+        [ngClass]="{ 'font-weight-bold': currentRoute === 'report' }"
         [routerLink]="['/report']"
         >X-ray</a
       >
@@ -155,7 +155,7 @@
         i18n
         mat-menu-item
         [ngClass]="{
-          'font-weight-bold': currentRoute?.startsWith('transactions')
+          'font-weight-bold': currentRoute === 'transactions'
         }"
         [routerLink]="['/transactions']"
         >Transactions</a
@@ -164,7 +164,7 @@
         class="d-block d-sm-none"
         i18n
         mat-menu-item
-        [ngClass]="{ 'font-weight-bold': currentRoute?.startsWith('accounts') }"
+        [ngClass]="{ 'font-weight-bold': currentRoute === 'accounts' }"
         [routerLink]="['/accounts']"
         >Accounts</a
       >
@@ -172,7 +172,7 @@
         class="align-items-center d-flex"
         i18n
         mat-menu-item
-        [ngClass]="{ 'font-weight-bold': currentRoute?.startsWith('account') }"
+        [ngClass]="{ 'font-weight-bold': currentRoute === 'account' }"
         [routerLink]="['/account']"
         >Ghostfolio Account</a
       >
@@ -181,7 +181,7 @@
         class="d-block d-sm-none"
         i18n
         mat-menu-item
-        [ngClass]="{ 'font-weight-bold': currentRoute?.startsWith('admin') }"
+        [ngClass]="{ 'font-weight-bold': currentRoute === 'admin' }"
         [routerLink]="['/admin']"
         >Admin Control</a
       >
@@ -191,7 +191,7 @@
         i18n
         mat-menu-item
         [ngClass]="{
-          'font-weight-bold': currentRoute?.startsWith('resources')
+          'font-weight-bold': currentRoute === 'resources'
         }"
         [routerLink]="['/resources']"
         >Resources</a
@@ -201,7 +201,7 @@
         class="d-block d-sm-none"
         i18n
         mat-menu-item
-        [ngClass]="{ 'font-weight-bold': currentRoute?.startsWith('pricing') }"
+        [ngClass]="{ 'font-weight-bold': currentRoute === 'pricing' }"
         [routerLink]="['/pricing']"
         >Pricing</a
       >
@@ -209,7 +209,7 @@
         class="d-block d-sm-none"
         i18n
         mat-menu-item
-        [ngClass]="{ 'font-weight-bold': currentRoute?.startsWith('about') }"
+        [ngClass]="{ 'font-weight-bold': currentRoute === 'about' }"
         [routerLink]="['/about']"
         >About Ghostfolio</a
       >
@@ -231,7 +231,7 @@
       *ngIf="hasPermissionForSubscription"
       i18n
       mat-flat-button
-      [color]="currentRoute?.startsWith('pricing') ? 'primary' : null"
+      [color]="currentRoute === 'pricing' ? 'primary' : null"
       [routerLink]="['/pricing']"
       >Pricing</a
     >
@@ -239,7 +239,7 @@
       class="d-none d-sm-block mx-1"
       i18n
       mat-flat-button
-      [color]="currentRoute?.startsWith('about') ? 'primary' : null"
+      [color]="currentRoute === 'about' ? 'primary' : null"
       [routerLink]="['/about']"
       >About</a
     >