Add sub menu

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"

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();
 

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

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,

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;
     }
   }
 }