Written the html and ts file code.

src/app/core/admin/admin-overview/admin-overview.component.html

@@ -10,7 +10,7 @@ <h1>Administration & Configuration</h1>
 <h2>Shortcuts</h2>
 <mat-nav-list>
   @for (item of adminOverviewService.menuItems; track item) {
-    <mat-list-item [routerLink]="[item.link]">{{ item.label }}</mat-list-item>
+    <mat-list-item [routerLink]="[item.target]">{{ item.label }}</mat-list-item>
   }
 </mat-nav-list>
 

src/app/core/admin/admin-overview/admin-overview.service.ts

@@ -13,19 +13,19 @@ export class AdminOverviewService {
   menuItems: MenuItem[] = [
     {
       label: $localize`:admin menu item:Site Settings`,
-      link: "/admin/site-settings",
+      target: "/admin/site-settings",
     },
     {
       label: $localize`:admin menu item:Database Conflicts`,
-      link: "/admin/conflicts",
+      target: "/admin/conflicts",
     },
     {
       label: $localize`:admin menu item:Administer Entity Types`,
-      link: "/admin/entity",
+      target: "/admin/entity",
     },
     {
       label: $localize`:admin menu item:Setup Wizard`,
-      link: "/admin/setup-wizard",
+      target: "/admin/setup-wizard",
     },
   ];
 }

src/app/core/admin/setup-wizard/setup-wizard-config.ts

@@ -54,11 +54,11 @@ We are currently extending and optimizing the user interfaces for these steps._
       actions: [
         {
           label: $localize`:Setup Wizard Step Action:Customize Child profile`,
-          link: "/admin/entity/Child",
+          target: "/admin/entity/Child",
         },
         {
           label: $localize`:Setup Wizard Step Action:Customize School profile`,
-          link: "/admin/entity/School",
+          target: "/admin/entity/School",
         },
       ],
     },
@@ -70,7 +70,7 @@ Data is synced and all users have access to the latest information.`,
       actions: [
         {
           label: $localize`:Setup Wizard Step Action:Manage User Accounts`,
-          link: "/user",
+          target: "/user",
         },
       ],
     },
@@ -84,7 +84,7 @@ The Import Module helps your map your spreadsheet data to the relevant fields in
       actions: [
         {
           label: $localize`:Setup Wizard Step Action:Import Data`,
-          link: "/import",
+          target: "/import",
         },
       ],
     },

src/app/core/admin/setup-wizard/setup-wizard.component.html

@@ -18,8 +18,8 @@
       <markdown>{{ step.text }}</markdown>
 
       <mat-action-list>
-        @for (action of step.actions; track action.link) {
-          <button mat-list-item [routerLink]="action.link">
+        @for (action of step.actions; track action.target) {
+          <button mat-list-item [routerLink]="action.target">
             {{ action.label }}
           </button>
         }

src/app/core/config/config.service.ts

@@ -187,7 +187,7 @@ const migrateMenuItemConfig: ConfigMigration = (key, configPart) => {
     | {
         name: string;
         icon: string;
-        link: string;
+        target: string;
       }
     | MenuItem
   )[] = configPart.items;
@@ -197,7 +197,7 @@ const migrateMenuItemConfig: ConfigMigration = (key, configPart) => {
       return {
         label: item["name"],
         icon: item.icon,
-        link: item.link,
+        target: item.target,
       };
     } else {
       return item;

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

@@ -21,7 +21,7 @@ export class RoutePermissionsService {
   async filterPermittedRoutes(items: MenuItem[]): Promise<MenuItem[]> {
     const accessibleRoutes: MenuItem[] = [];
     for (const item of items) {
-      if (await this.isAccessibleRouteForUser(item.link)) {
+      if (await this.isAccessibleRouteForUser(item.target as string)) {
         accessibleRoutes.push(item);
       }
     }

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')
    */
-  target: string | MenuItem[];
+  target?: string;
+
+  subMenu?: MenuItem[];
 }
 
 /**

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

@@ -22,8 +22,8 @@
       angularticsCategory="Navigation"
       angularticsAction="app_navigation_link_click"
       [angularticsLabel]="item.label"
-      [routerLink]="[item.link]"
-      [class.matched-background]="item.link === activeLink"
+      [routerLink]="[item.target]"
+      [class.matched-background]="item.target === activeLink"
       onclick="this.blur();"
     >
       <a class="flex-row gap-small">
@@ -34,6 +34,22 @@
         <div>{{ item.label }}</div>
       </a>
     </mat-list-item>
+
+    <ng-container *ngIf="hasSubMenu(item)">
+      <button
+        mat-menu-item
+        [matMenuTriggerFor]="subMenu"
+        mat-icon="more_vert"
+      ></button>
+      <mat-menu #subMenu="matMenu">
+        <ng-container *ngFor="let subItem of item.subMenu">
+          <button mat-menu-item [routerLink]="subItem.target">
+            {{ subItem.label }}
+          </button>
+        </ng-container>
+      </mat-menu>
+    </ng-container>
+
     <mat-divider></mat-divider>
   </ng-container>
 </mat-nav-list>

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

@@ -26,6 +26,9 @@ import { 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 { CommonModule } from "@angular/common";
+import { MatIcon } from "@angular/material/icon";
 
 /**
  * Main app menu listing.
@@ -41,6 +44,9 @@ import { RoutePermissionsService } from "../../../config/dynamic-routing/route-p
     Angulartics2Module,
     RouterLink,
     FaDynamicIconComponent,
+    MatMenuModule,
+    CommonModule,
+    MatIcon,
   ],
   standalone: true,
 })
@@ -72,6 +78,10 @@ export class NavigationComponent {
       });
   }
 
+  hasSubMenu(item: MenuItem): boolean {
+    return item.subMenu && item.subMenu.length > 0;
+  }
+
   /**
    * Computes the active link from a set of MenuItems.
    * The active link is the link with the most "overlap", i.e.
@@ -90,9 +100,9 @@ export class NavigationComponent {
       case 0:
         return "";
       case 1:
-        const link = items[0].target;
+        const target = items[0].target as string;
         // for root "/" only return on exact match to avoid confusing highlighting of unrelated items
-        return newUrl === target || target.length > 1 ? link : "";
+        return newUrl === target || target.length > 1 ? target : "";
       default:
         // If there are multiple matches (A user navigates with a URL that starts with
         // multiple links from a MenuItem), use the element where the length is bigger.

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

@@ -24,6 +24,7 @@ const flatMenuItems: MenuItem[] = [
     label: "Home",
     icon: "home",
     target: "/",
+    subMenu: [],
   },
   {
     label: "About",
@@ -41,7 +42,7 @@ const nestedMenuItems: MenuItem[] = [
   {
     label: "Services",
     icon: "build",
-    target: [
+    subMenu: [
       {
         label: "Web Development",
         icon: "code",

src/app/features/dashboard-widgets/shortcut-dashboard-widget/shortcut-dashboard/shortcut-dashboard.stories.ts

@@ -27,12 +27,12 @@ Primary.args = {
     {
       label: "Record Attendance",
       icon: "calendar-check-o",
-      link: "/attendance/add-day",
+      target: "/attendance/add-day",
     },
     {
       label: "All Notes",
       icon: "file-text",
-      link: "/note",
+      target: "/note",
     },
   ] as MenuItem[],
 };

src/app/features/template-export/template-export.module.ts

@@ -53,7 +53,7 @@ export class TemplateExportModule {
 
     adminOverviewService.menuItems.push({
       label: $localize`:admin menu item:Manage Export Templates`,
-      link: TemplateExport.route,
+      target: TemplateExport.route,
     });
   }
 }