From 65cc9ac9ef069768e5341b03085e6ad7bb974141 Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Mon, 13 Feb 2023 18:19:17 +0100
Subject: [PATCH] Add sub menu

---
 apps/client/src/app/app.component.html        |  2 +
 apps/client/src/app/app.component.ts          |  4 +-
 .../components/header/header.component.html   | 44 +++++++++++++++++++
 .../app/components/header/header.component.ts | 11 +++++
 apps/client/src/styles.scss                   |  1 +
 5 files changed, 61 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/app/app.component.html b/apps/client/src/app/app.component.html
index cdf0ba6b5..3240b2eba 100644
--- a/apps/client/src/app/app.component.html
+++ b/apps/client/src/app/app.component.html
@@ -2,6 +2,8 @@
   <gf-header
     class="position-fixed w-100"
     [currentRoute]="currentRoute"
+    [currentSubRoute]="currentSubRoute"
+    [deviceType]="deviceType"
     [info]="info"
     [pageTitle]="pageTitle"
     [user]="user"
diff --git a/apps/client/src/app/app.component.ts b/apps/client/src/app/app.component.ts
index b6a40c061..c8b7d3aa3 100644
--- a/apps/client/src/app/app.component.ts
+++ b/apps/client/src/app/app.component.ts
@@ -30,6 +30,7 @@ import { UserService } from './services/user/user.service';
 export class AppComponent implements OnDestroy, OnInit {
   public canCreateAccount: boolean;
   public currentRoute: string;
+  public currentSubRoute: string;
   public currentYear = new Date().getFullYear();
   public deviceType: string;
   public info: InfoItem;
@@ -62,7 +63,8 @@ export class AppComponent implements OnDestroy, OnInit {
         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.currentRoute = urlSegments[0]?.path;
+        this.currentSubRoute = urlSegments[1]?.path;
 
         this.info = this.dataService.fetchInfo();
 
diff --git a/apps/client/src/app/components/header/header.component.html b/apps/client/src/app/components/header/header.component.html
index 2d3b1aee3..76726d11e 100644
--- a/apps/client/src/app/components/header/header.component.html
+++ b/apps/client/src/app/components/header/header.component.html
@@ -21,16 +21,60 @@
       >Overview</a
     >
     <a
+      #portfolioMenuTrigger="matMenuTrigger"
       class="d-none d-sm-block mx-1"
       i18n
       mat-flat-button
+      [matMenuTriggerFor]="portfolioMenu"
       [ngClass]="{
         'font-weight-bold': currentRoute === 'portfolio',
         'text-decoration-underline': currentRoute === 'portfolio'
       }"
       [routerLink]="['/portfolio']"
+      (mouseover)="deviceType === 'desktop' && openMenu(portfolioMenuTrigger)"
       >Portfolio</a
     >
+    <mat-menu #portfolioMenu="matMenu" xPosition="before">
+      <div (mouseleave)="closeMenu(portfolioMenuTrigger)">
+        <a
+          i18n
+          mat-menu-item
+          [ngClass]="{
+            'font-weight-bold': currentSubRoute === 'analysis'
+          }"
+          [routerLink]="['/portfolio', 'analysis']"
+          >Analysis</a
+        >
+        <a
+          i18n
+          mat-menu-item
+          [ngClass]="{ 'font-weight-bold': currentSubRoute === 'holdings' }"
+          [routerLink]="['/portfolio', 'holdings']"
+          >Holdings</a
+        >
+        <a
+          i18n
+          mat-menu-item
+          [ngClass]="{ 'font-weight-bold': currentSubRoute === 'activities' }"
+          [routerLink]="['/portfolio', 'activities']"
+          >Activities</a
+        >
+        <a
+          i18n
+          mat-menu-item
+          [ngClass]="{ 'font-weight-bold': currentSubRoute === 'allocations' }"
+          [routerLink]="['/portfolio', 'allocations']"
+          >Allocations</a
+        >
+        <a
+          i18n
+          mat-menu-item
+          [ngClass]="{ 'font-weight-bold': currentSubRoute === 'fire' }"
+          [routerLink]="['/portfolio', 'fire']"
+          >FIRE</a
+        >
+      </div>
+    </mat-menu>
     <a
       class="d-none d-sm-block mx-1"
       i18n
diff --git a/apps/client/src/app/components/header/header.component.ts b/apps/client/src/app/components/header/header.component.ts
index 49eeab20f..16b5397c5 100644
--- a/apps/client/src/app/components/header/header.component.ts
+++ b/apps/client/src/app/components/header/header.component.ts
@@ -7,6 +7,7 @@ import {
   Output
 } from '@angular/core';
 import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatMenuTrigger } from '@angular/material/menu';
 import { Router } from '@angular/router';
 import { LoginWithAccessTokenDialog } from '@ghostfolio/client/components/login-with-access-token-dialog/login-with-access-token-dialog.component';
 import { DataService } from '@ghostfolio/client/services/data.service';
@@ -29,6 +30,8 @@ import { catchError, takeUntil } from 'rxjs/operators';
 })
 export class HeaderComponent implements OnChanges {
   @Input() currentRoute: string;
+  @Input() currentSubRoute: string;
+  @Input() deviceType: string;
   @Input() info: InfoItem;
   @Input() pageTitle: string;
   @Input() user: User;
@@ -88,6 +91,10 @@ export class HeaderComponent implements OnChanges {
     );
   }
 
+  public closeMenu(menuTrigger: MatMenuTrigger) {
+    menuTrigger.closeMenu();
+  }
+
   public impersonateAccount(aId: string) {
     if (aId) {
       this.impersonationStorageService.setId(aId);
@@ -143,6 +150,10 @@ export class HeaderComponent implements OnChanges {
       });
   }
 
+  public openMenu(menuTrigger: MatMenuTrigger) {
+    menuTrigger.openMenu();
+  }
+
   public setToken(aToken: string) {
     this.tokenStorageService.saveToken(
       aToken,
diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index 69b6a40a1..cec0efd8c 100644
--- a/apps/client/src/styles.scss
+++ b/apps/client/src/styles.scss
@@ -399,6 +399,7 @@ ngx-skeleton-loader {
     .mdc-list-item__primary-text {
       align-items: center;
       display: flex;
+      font-weight: inherit;
     }
   }
 }