nested navigation menu items

src/app/core/config/dynamic-routing/route-permissions.service.spec.ts

@@ -3,15 +3,33 @@ import { TestBed } from "@angular/core/testing";
 import { RoutePermissionsService } from "./route-permissions.service";
 import { UserRoleGuard } from "../../permissions/permission-guard/user-role.guard";
 import { EntityPermissionGuard } from "../../permissions/permission-guard/entity-permission.guard";
+import { MenuItem } from "app/core/ui/navigation/menu-item";
 
 describe("RoutePermissionsService", () => {
   let service: RoutePermissionsService;
 
+  let mockUserRoleGuard: jasmine.SpyObj<UserRoleGuard>;
+  let mockEntityPermissionGuard: jasmine.SpyObj<EntityPermissionGuard>;
+
   beforeEach(() => {
+    mockEntityPermissionGuard = jasmine.createSpyObj(["checkRoutePermissions"]);
+    mockEntityPermissionGuard.checkRoutePermissions.and.resolveTo(true);
+
+    mockUserRoleGuard = jasmine.createSpyObj(["checkRoutePermissions"]);
+    mockUserRoleGuard.checkRoutePermissions.and.callFake(
+      async (path: string) => {
+        if (path === "allowed") {
+          return true;
+        } else {
+          return false;
+        }
+      },
+    );
+
     TestBed.configureTestingModule({
       providers: [
-        { provide: UserRoleGuard, useValue: {} },
-        { provide: EntityPermissionGuard, useValue: {} },
+        { provide: UserRoleGuard, useValue: mockUserRoleGuard },
+        { provide: EntityPermissionGuard, useValue: mockEntityPermissionGuard },
       ],
     });
     service = TestBed.inject(RoutePermissionsService);
@@ -20,4 +38,86 @@ describe("RoutePermissionsService", () => {
   it("should be created", () => {
     expect(service).toBeTruthy();
   });
+
+  it("should filter menu-items where user doesn't have permission for its link", async () => {
+    const itemPermitted: MenuItem = {
+      label: "Visible Item",
+      link: "allowed",
+    };
+    const itemProtected: MenuItem = {
+      label: "Hidden Item",
+      link: "blocked",
+    };
+
+    const filteredItems: MenuItem[] = await service.filterPermittedRoutes([
+      itemPermitted,
+      itemProtected,
+    ]);
+
+    expect(filteredItems).toEqual([itemPermitted]);
+  });
+
+  it("should filter each submenu item based on permissions", async () => {
+    const itemPermitted: MenuItem = {
+      label: "Visible Item",
+      link: "allowed",
+    };
+    const itemProtected: MenuItem = {
+      label: "Hidden Item",
+      link: "blocked",
+    };
+    const nestedItem: MenuItem = {
+      label: "Parent Item",
+      subMenu: [itemPermitted, itemProtected],
+    };
+
+    const filteredItems: MenuItem[] = await service.filterPermittedRoutes([
+      nestedItem,
+    ]);
+
+    expect(filteredItems).toEqual([
+      {
+        label: "Parent Item",
+        subMenu: [itemPermitted],
+      },
+    ]);
+  });
+
+  it("should filter parent item if all submenu items are filter due to permissions", async () => {
+    const nestedItem: MenuItem = {
+      label: "Parent Item",
+      subMenu: [
+        {
+          label: "Hidden Item 1",
+          link: "blocked",
+        },
+        {
+          label: "Hidden Item 2",
+          link: "blocked",
+        },
+      ],
+    };
+
+    const filteredItems: MenuItem[] = await service.filterPermittedRoutes([
+      nestedItem,
+    ]);
+
+    expect(filteredItems).toEqual([]);
+  });
 });
+
+/*
+
+Simple:
+  item 1
+  item 2  x
+
+Nested:
+  item 1
+    1.1
+    1.2   x
+
+  item 2  x
+    2.1   x
+
+ */

src/app/core/config/dynamic-routing/route-permissions.service.ts

@@ -20,15 +20,28 @@ export class RoutePermissionsService {
    */
   async filterPermittedRoutes(items: MenuItem[]): Promise<MenuItem[]> {
     const accessibleRoutes: MenuItem[] = [];
+
     for (const item of items) {
-      if (await this.isAccessibleRouteForUser(item.link)) {
+      if (item.link && (await this.isAccessibleRouteForUser(item.link))) {
         accessibleRoutes.push(item);
+      } else if (item.subMenu) {
+        const accessibleSubItems: MenuItem[] = await this.filterPermittedRoutes(
+          item.subMenu,
+        );
+
+        if (accessibleSubItems.length > 0) {
+          // only adding the item if there is at least one accessible subMenu item
+          const filteredParentItem: MenuItem = Object.assign({}, item);
+          filteredParentItem.subMenu = accessibleSubItems;
+          accessibleRoutes.push(filteredParentItem);
+        }
       }
     }
+
     return accessibleRoutes;
   }
 
-  private async isAccessibleRouteForUser(path: string) {
+  private async isAccessibleRouteForUser(path: string): Promise<boolean> {
     return (
       (await this.roleGuard.checkRoutePermissions(path)) &&
       (await this.permissionGuard.checkRoutePermissions(path))

src/app/core/ui/navigation/menu-item.ts

@@ -13,7 +13,9 @@ export interface MenuItem {
   /**
    * The url fragment to which the item will route to (e.g. '/dashboard')
    */
-  link: string;
+  link?: string;
+
+  subMenu?: MenuItem[];
 }
 
 /**

src/app/core/ui/navigation/menu-item/menu-item.component.html

@@ -0,0 +1,31 @@
+<mat-list-item
+  angulartics2On="click"
+  angularticsCategory="Navigation"
+  angularticsAction="app_navigation_link_click"
+  [angularticsLabel]="item.label"
+  [routerLink]="item.link ? [item.link] : undefined"
+  [class.matched-background]="item.link === activeLink"
+  [class.indent-item]="item.link === activeLink"
+  (click)="toggleSubMenu()"
+>
+  <a class="flex-row gap-small">
+    <app-fa-dynamic-icon
+      class="nav-icon"
+      [icon]="item.icon"
+    ></app-fa-dynamic-icon>
+    <div>{{ item.label }}</div>
+
+    <fa-icon
+      *ngIf="hasSubMenu(item)"
+      [icon]="isExpanded ? 'chevron-down' : 'chevron-right'"
+    ></fa-icon>
+  </a>
+</mat-list-item>
+
+<!-- Render submenus if they exist and are expanded -->
+<div *ngIf="isExpanded" class="submenu">
+  <ng-container *ngFor="let subItem of item.subMenu">
+    <!-- Pass activeLink to each submenu item to highlight the active submenu -->
+    <app-menu-item [item]="subItem" [activeLink]="activeLink"></app-menu-item>
+  </ng-container>
+</div>

src/app/core/ui/navigation/menu-item/menu-item.component.scss

@@ -0,0 +1,21 @@
+@use "../../../../../styles/variables/sizes";
+@use "../../../../../styles/variables/colors";
+
+/* ensures that all icons have the same width */
+.nav-icon {
+  min-width: sizes.$max-icon-width;
+}
+
+.matched-background {
+  background-color: colors.$background !important;
+}
+
+.submenu {
+  padding-left: 20px;
+}
+
+.indent-item {
+  margin-left: 8px;
+  padding-left: 8px;
+  width: auto;
+}

src/app/core/ui/navigation/menu-item/menu-item.component.ts

@@ -0,0 +1,48 @@
+import { Component, Input } from "@angular/core";
+import { CommonModule, NgForOf } from "@angular/common";
+import { MatListModule } from "@angular/material/list";
+import { FaIconComponent } from "@fortawesome/angular-fontawesome";
+import { FaDynamicIconComponent } from "../../../common-components/fa-dynamic-icon/fa-dynamic-icon.component";
+import { RouterLink } from "@angular/router";
+import { Angulartics2Module } from "angulartics2";
+import { MenuItem } from "../menu-item";
+import { MatMenuModule } from "@angular/material/menu";
+
+@Component({
+  selector: "app-menu-item",
+  templateUrl: "./menu-item.component.html",
+  styleUrls: ["./menu-item.component.scss"],
+  imports: [
+    CommonModule,
+    MatListModule,
+    FaIconComponent,
+    FaDynamicIconComponent,
+    RouterLink,
+    Angulartics2Module,
+    NgForOf,
+    MatMenuModule,
+  ],
+  standalone: true,
+})
+export class MenuItemComponent {
+  /**
+   * The menu item to be displayed.
+   */
+  @Input() item: MenuItem;
+
+  /**
+   * The menu item link that is currently displayed in the app
+   * in order to highlight the active menu.
+   */
+  @Input() activeLink: string;
+
+  isExpanded: boolean = false;
+
+  toggleSubMenu(): void {
+    this.isExpanded = !this.isExpanded;
+  }
+
+  hasSubMenu(item: MenuItem): boolean {
+    return !!item.subMenu && item.subMenu.length > 0;
+  }
+}

src/app/core/ui/navigation/navigation/navigation.component.html

@@ -1,39 +1,5 @@
-<!--
-  ~     This file is part of ndb-core.
-  ~
-  ~     ndb-core is free software: you can redistribute it and/or modify
-  ~     it under the terms of the GNU General Public License as published by
-  ~     the Free Software Foundation, either version 3 of the License, or
-  ~     (at your option) any later version.
-  ~
-  ~     ndb-core is distributed in the hope that it will be useful,
-  ~     but WITHOUT ANY WARRANTY; without even the implied warranty of
-  ~     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-  ~     GNU General Public License for more details.
-  ~
-  ~     You should have received a copy of the GNU General Public License
-  ~     along with ndb-core.  If not, see <http://www.gnu.org/licenses/>.
-  -->
-
 <mat-nav-list>
   <ng-container *ngFor="let item of menuItems">
-    <mat-list-item
-      angulartics2On="click"
-      angularticsCategory="Navigation"
-      angularticsAction="app_navigation_link_click"
-      [angularticsLabel]="item.label"
-      [routerLink]="[item.link]"
-      [class.matched-background]="item.link === activeLink"
-      onclick="this.blur();"
-    >
-      <a class="flex-row gap-small">
-        <app-fa-dynamic-icon
-          class="nav-icon"
-          [icon]="item.icon"
-        ></app-fa-dynamic-icon>
-        <div>{{ item.label }}</div>
-      </a>
-    </mat-list-item>
-    <mat-divider></mat-divider>
+    <app-menu-item [item]="item" [activeLink]="activeLink"></app-menu-item>
   </ng-container>
 </mat-nav-list>

src/app/core/ui/navigation/navigation/navigation.component.scss

@@ -1,11 +0,0 @@
-@use "variables/sizes";
-@use "variables/colors";
-
-/* ensures that all icons have the same width */
-.nav-icon {
-  min-width: sizes.$max-icon-width;
-}
-
-.matched-background {
-  background-color: colors.$background !important;
-}

src/app/core/ui/navigation/navigation/navigation.component.ts

@@ -1,31 +1,15 @@
-/*
- *     This file is part of ndb-core.
- *
- *     ndb-core is free software: you can redistribute it and/or modify
- *     it under the terms of the GNU General Public License as published by
- *     the Free Software Foundation, either version 3 of the License, or
- *     (at your option) any later version.
- *
- *     ndb-core is distributed in the hope that it will be useful,
- *     but WITHOUT ANY WARRANTY; without even the implied warranty of
- *     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- *     GNU General Public License for more details.
- *
- *     You should have received a copy of the GNU General Public License
- *     along with ndb-core.  If not, see <http://www.gnu.org/licenses/>.
- */
-
 import { Component } from "@angular/core";
 import { MenuItem, NavigationMenuConfig } from "../menu-item";
 import { ConfigService } from "../../../config/config.service";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
-import { NavigationEnd, Router, RouterLink } from "@angular/router";
+import { NavigationEnd, Router } from "@angular/router";
 import { filter, startWith } from "rxjs/operators";
 import { MatListModule } from "@angular/material/list";
-import { NgForOf } from "@angular/common";
+import { CommonModule, NgForOf } from "@angular/common";
 import { Angulartics2Module } from "angulartics2";
-import { FaDynamicIconComponent } from "../../../common-components/fa-dynamic-icon/fa-dynamic-icon.component";
 import { RoutePermissionsService } from "../../../config/dynamic-routing/route-permissions.service";
+import { MatMenuModule } from "@angular/material/menu";
+import { MenuItemComponent } from "../menu-item/menu-item.component";
 
 /**
  * Main app menu listing.
@@ -39,8 +23,9 @@ import { RoutePermissionsService } from "../../../config/dynamic-routing/route-p
     MatListModule,
     NgForOf,
     Angulartics2Module,
-    RouterLink,
-    FaDynamicIconComponent,
+    MatMenuModule,
+    CommonModule,
+    MenuItemComponent,
   ],
   standalone: true,
 })
@@ -82,9 +67,10 @@ export class NavigationComponent {
    */
   private computeActiveLink(newUrl: string): string {
     // conservative filter matching all items that could fit to the given url
-    const items: MenuItem[] = this.menuItems.filter((item) =>
-      newUrl.startsWith(item.link),
-    );
+    // flatten nested submenu items to parse all
+    const items: MenuItem[] = this.menuItems
+      .reduce((acc, item) => acc.concat(item, item.subMenu || []), [])
+      .filter((item) => newUrl.startsWith(item.link));
     switch (items.length) {
       case 0:
         return "";