From 1dc94c002738fb0d28c353cff2160d9a1cfc7e96 Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Tue, 11 May 2021 17:49:35 +0200
Subject: [PATCH] Bugfix/keep current menu item active (#78)

* Keep current menu item active

* Update changelog

* Feature/travis (#77)

* integrate travis

* fix prettier transactions-page.component.ts

* change base branch to main

* fetch all branches in .travis.yml

* Keep current menu item active

* Update changelog

Co-authored-by: Valentin Zickner <3200232+vzickner@users.noreply.github.com>
---
 CHANGELOG.md                                  |  1 +
 apps/client/src/app/app.component.ts          |  3 +-
 .../components/header/header.component.html   | 38 ++++++++++---------
 3 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 92ddaa77..7af3467f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Fixed the filtering by account name in the transactions table
+- Fixed the active menu item state when a modal has opened
 
 ## 1.0.0 - 05.05.2021
 
diff --git a/apps/client/src/app/app.component.ts b/apps/client/src/app/app.component.ts
index 22e7fe6f..ad17b0c4 100644
--- a/apps/client/src/app/app.component.ts
+++ b/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
diff --git a/apps/client/src/app/components/header/header.component.html b/apps/client/src/app/components/header/header.component.html
index 9f149743..883f8222 100644
--- a/apps/client/src/app/components/header/header.component.html
+++ b/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