From 69205e068b937de2c137a0bde93b036524075ef5 Mon Sep 17 00:00:00 2001
From: Benji Franck <benjamin.franck@gmail.com>
Date: Tue, 21 Apr 2026 14:44:45 -0600
Subject: [PATCH] fix(#3854): Hide empty menu slots for Work Side Menu in
 Angular

---
 .../routes/bugs/3854/bug3854.component.html   | 44 +++++++++++++++++++
 .../src/routes/bugs/3854/bug3854.component.ts | 18 ++++++++
 .../src/routes/bugs/3854/bug3854.route.json   |  6 +++
 .../work-side-menu/work-side-menu.ts          | 30 ++++++++-----
 4 files changed, 86 insertions(+), 12 deletions(-)
 create mode 100644 apps/prs/angular/src/routes/bugs/3854/bug3854.component.html
 create mode 100644 apps/prs/angular/src/routes/bugs/3854/bug3854.component.ts
 create mode 100644 apps/prs/angular/src/routes/bugs/3854/bug3854.route.json

diff --git a/apps/prs/angular/src/routes/bugs/3854/bug3854.component.html b/apps/prs/angular/src/routes/bugs/3854/bug3854.component.html
new file mode 100644
index 0000000000..7a6013912d
--- /dev/null
+++ b/apps/prs/angular/src/routes/bugs/3854/bug3854.component.html
@@ -0,0 +1,44 @@
+<goab-text tag="h1" mb="m">Bug 3854 - Work Side Menu without extra sections</goab-text>
+<goab-text mb="xl">
+  This test page renders a Work Side Menu with only primary content. Confirm the
+  following:
+  <ul>
+    <li>The primary menu is visible.</li>
+    <li>The secondary and account menu is hidden.</li>
+  </ul>
+</goab-text>
+
+<div
+  style="
+    max-width: 20rem;
+    border: 1px solid #ddd;
+    min-height: 28rem;
+    --goa-work-side-menu-height: 400px;
+  "
+>
+  <goab-work-side-menu
+    heading="Primary-only menu"
+    url="/bugs/3854"
+    [open]="true"
+    (onNavigate)="handleNavigate($event)"
+    [primaryContent]="primaryContent"
+  ></goab-work-side-menu>
+</div>
+
+<ng-template #primaryContent>
+  <goab-work-side-menu-item
+    icon="home"
+    label="Dashboard"
+    url="/bugs/3854"
+  ></goab-work-side-menu-item>
+  <goab-work-side-menu-item
+    icon="list"
+    label="Cases"
+    url="/bugs/3854"
+  ></goab-work-side-menu-item>
+  <goab-work-side-menu-item
+    icon="settings"
+    label="Settings"
+    url="/bugs/3854"
+  ></goab-work-side-menu-item>
+</ng-template>
diff --git a/apps/prs/angular/src/routes/bugs/3854/bug3854.component.ts b/apps/prs/angular/src/routes/bugs/3854/bug3854.component.ts
new file mode 100644
index 0000000000..fffe75426a
--- /dev/null
+++ b/apps/prs/angular/src/routes/bugs/3854/bug3854.component.ts
@@ -0,0 +1,18 @@
+import { Component } from "@angular/core";
+import {
+  GoabText,
+  GoabWorkSideMenu,
+  GoabWorkSideMenuItem,
+} from "@abgov/angular-components";
+
+@Component({
+  standalone: true,
+  selector: "abgov-bug3854",
+  templateUrl: "./bug3854.component.html",
+  imports: [GoabText, GoabWorkSideMenu, GoabWorkSideMenuItem],
+})
+export class Bug3854Component {
+  handleNavigate(_path: string): void {
+    // Intentionally no-op for visual verification.
+  }
+}
diff --git a/apps/prs/angular/src/routes/bugs/3854/bug3854.route.json b/apps/prs/angular/src/routes/bugs/3854/bug3854.route.json
new file mode 100644
index 0000000000..b2155a2707
--- /dev/null
+++ b/apps/prs/angular/src/routes/bugs/3854/bug3854.route.json
@@ -0,0 +1,6 @@
+{
+  "type": "bug",
+  "id": "3854",
+  "path": "bugs/3854",
+  "title": "Work Side Menu without secondary/account"
+}
diff --git a/libs/angular-components/src/lib/components/work-side-menu/work-side-menu.ts b/libs/angular-components/src/lib/components/work-side-menu/work-side-menu.ts
index ac1bce228e..e6e6d1a62e 100644
--- a/libs/angular-components/src/lib/components/work-side-menu/work-side-menu.ts
+++ b/libs/angular-components/src/lib/components/work-side-menu/work-side-menu.ts
@@ -27,15 +27,21 @@ import { NgTemplateOutlet } from "@angular/common";
         (_toggle)="_onToggle()"
         (_navigate)="_onNavigate($event)"
       >
-        <div slot="primary">
-          <ng-container [ngTemplateOutlet]="primaryContent"></ng-container>
-        </div>
-        <div slot="secondary">
-          <ng-container [ngTemplateOutlet]="secondaryContent"></ng-container>
-        </div>
-        <div slot="account">
-          <ng-container [ngTemplateOutlet]="accountContent"></ng-container>
-        </div>
+        @if (primaryContent) {
+          <div slot="primary">
+            <ng-container [ngTemplateOutlet]="primaryContent"></ng-container>
+          </div>
+        }
+        @if (secondaryContent) {
+          <div slot="secondary">
+            <ng-container [ngTemplateOutlet]="secondaryContent"></ng-container>
+          </div>
+        }
+        @if (accountContent) {
+          <div slot="account">
+            <ng-container [ngTemplateOutlet]="accountContent"></ng-container>
+          </div>
+        }
       </goa-work-side-menu>
     }
   `,
@@ -58,11 +64,11 @@ export class GoabWorkSideMenu implements OnInit {
   /** Sets a data-testid attribute for automated testing. */
   @Input() testId?: string;
   /** Template reference for the primary navigation slot content. */
-  @Input() primaryContent!: TemplateRef<any>;
+  @Input() primaryContent!: TemplateRef<unknown>;
   /** Template reference for the secondary navigation slot content. */
-  @Input() secondaryContent!: TemplateRef<any>;
+  @Input() secondaryContent!: TemplateRef<unknown>;
   /** Template reference for the account slot content. */
-  @Input() accountContent!: TemplateRef<any>;
+  @Input() accountContent!: TemplateRef<unknown>;
   /** Emits when the side menu is toggled open or closed. */
   @Output() onToggle = new EventEmitter();
   /** Emits when a navigation link is clicked. Emits the URL as a string. */