ftr: handle routes in user menu - admin

TRACEFOSS-893

Author: ds-ext-dskrzypczak

src/app/modules/core/layout/header/user-navigation/user-menu.component.html

@@ -52,7 +52,9 @@
         <app-button variant="icon" iconName="home"></app-button>
       </div>
 
-      <ng-container *ngTemplateOutlet="menuItem; context: { name: 'admin', icon: 'apps', role: 'admin' }">
+      <ng-container
+        *ngTemplateOutlet="menuItem; context: { name: 'admin', icon: 'apps', role: 'admin', route: 'admin' }"
+      >
       </ng-container>
 
       <mat-divider></mat-divider>
@@ -75,11 +77,13 @@
   </div>
 </div>
 
-<ng-template #menuItem let-name="name" let-icon="icon" let-role="role">
-  <!--      TODO: [isActive]="this.activeMenu === name"-->
-  <!--      TODO: (click)="this.navigate(name)"-->
-
-  <div class="user-menu-items" *appHasRole="[role ?? 'user']">
+<ng-template #menuItem let-name="name" let-icon="icon" let-role="role" let-route="route">
+  <div
+    class="user-menu-items"
+    *appHasRole="[role ?? 'user']"
+    [routerLink]="route"
+    [class.user-menu-items--selected]="route === activeItem"
+  >
     <p class="regular-text user-menu-items__label" role="menuitem">
       {{ 'routing.' + name | i18n }}
     </p>

src/app/modules/core/layout/header/user-navigation/user-menu.component.scss

@@ -55,6 +55,10 @@
   @apply flex items-center space-x-2 hover:bg-dustyGrayShadeGallery p-1 cursor-pointer;
   justify-content: space-between;
   flex-direction: row;
+
+  &--selected {
+    @apply bg-dustyGrayShadeGallery;
+  }
 }
 
 .user-menu-items__icon {

src/app/modules/core/layout/header/user-navigation/user-menu.component.ts

@@ -21,8 +21,10 @@
 
 import { Component, HostListener } from '@angular/core';
 import { LayoutFacade } from '@shared/abstraction/layout-facade';
-import { Router } from '@angular/router';
+import { NavigationEnd, Router } from '@angular/router';
 import { environment } from '@env';
+import { NavigableUrls, KnownUrl } from '@core/kown-route';
+import { filter } from 'rxjs/operators';
 
 @Component({
   selector: 'app-user-navigation',
@@ -33,10 +35,18 @@ export class UserMenuComponent {
   public isExpanded = false;
   public userInitials = '';
   public userDetails = { name: '', email: '', role: '' };
+  public activeItem: string = '';
 
   constructor(private readonly layoutFacade: LayoutFacade, private readonly router: Router) {
     this.userInitials = this.layoutFacade.realName;
     this.userDetails = this.layoutFacade.userInformation;
+
+    this.router.events
+      .pipe(filter(event => event instanceof NavigationEnd))
+      .subscribe(({ urlAfterRedirects, url }: NavigationEnd) => {
+        const currentUrl = urlAfterRedirects ?? url;
+        this.activeItem = NavigableUrls.find(menuKey => currentUrl.includes(menuKey));
+      });
   }
 
   public expand(event: Event): void {