@abgov/nx-adsp 13.18.0-beta.8 → 13.18.0-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/nx-adsp",
-  "version": "13.18.0-beta.8",
+  "version": "13.18.0-beta.9",
   "license": "Apache-2.0",
   "main": "src/index.js",
   "description": "Government of Alberta - Nx plugin for ADSP apps.",

package/src/generators/vue-app/files/AGENTS.md__tmpl__

@@ -172,7 +172,7 @@ from **`<%= goaImportPath %>`**, not hand-rolled markup:
 
 | Component | Purpose |
 |---|---|
-| `AppSideMenu` | `goa-work-side-menu`. Takes `heading`/`primaryItems`/`secondaryItems`/`accountItems` props (each item: `{ label, to?, icon?, badge?, current? }`) and emits `itemClick` — it doesn't know about routing or auth, so `App.vue` computes `current`/handles the click itself. `App.vue` currently only populates `accountItems` (a single Sign in/out item); add real nav items to `primaryItems`/`secondaryItems` as routes are added. Also owns the skip-to-main-content landmark for this layout — `AppLayout` deliberately doesn't duplicate it |
+| `AppSideMenu` | `goa-work-side-menu`. Takes `heading`/`primaryItems`/`secondaryItems`/`accountItems` props (each item: `{ label, to?, icon?, badge?, current? }`) and emits `itemClick` — it doesn't know about routing or auth, so `App.vue` computes `current`/handles the click itself. `App.vue` currently only populates `accountItems` (a single Sign in/out item); add real nav items to `primaryItems`/`secondaryItems` as routes are added. Also owns the skip-to-main-content landmark for this layout — `AppLayout` deliberately doesn't duplicate it. Also takes an optional `#topbar` slot — a slim row above the routed content, for something like a notification bell; only renders when given content, unused by default |
 | `AppLayout` | The content gutter every view renders inside (see the key files table) |
 | `SessionExpiredBanner` | A `v-model:show` banner with `signIn`/`dismiss` emits. Bound to the `useSessionStore()` Pinia store (`src/stores/session.ts`), which `main.ts`'s `onAuthRefreshError` hook flips when the refresh token itself has expired |
 

package/src/generators/vue-components/files/src/lib/patterns/AppSideMenu.vue__tmpl__

@@ -1,9 +1,20 @@
 <script setup lang="ts">
+import { useSlots } from 'vue';
+
 // The alternate top-level shell for staff-facing/internal apps (goa-work-side-menu),
 // used instead of AppHeader/AppFooter -- not together with them. Presentational only:
 // unlike the real GovAlta-Pronghorn source this is adapted from, active-route
 // highlighting and navigation are the caller's job (pass `current` on each item,
 // listen for `item-click`) so this component doesn't need vue-router as a dependency.
+//
+// The real reference source also has a slim in-content "topbar" row for
+// module-registered header actions (e.g. a notification bell) -- there's no
+// AppHeader/utilities slot in this layout to hold that kind of thing. Exposed
+// here as a plain named slot (`#topbar`), not a module-registration system --
+// that's app-specific plumbing, not something a shared, presentational
+// component should own.
+const slots = useSlots();
+
 interface AppSideMenuItem {
   label: string;
   to?: string;
@@ -63,6 +74,9 @@ const emit = defineEmits<{ itemClick: [item: AppSideMenuItem] }>();
       />
     </goa-work-side-menu>
     <main id="main-content" class="app-side-menu-content">
+      <div v-if="slots.topbar" class="app-side-menu-topbar">
+        <slot name="topbar" />
+      </div>
       <slot />
     </main>
   </div>
@@ -80,6 +94,15 @@ const emit = defineEmits<{ itemClick: [item: AppSideMenuItem] }>();
   overflow-y: auto;
 }
 
+.app-side-menu-topbar {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--goa-space-s, 0.75rem);
+  padding: var(--goa-space-xs, 0.5rem) var(--goa-space-m, 1rem);
+  border-bottom: 1px solid var(--goa-color-greyscale-100, #f1f1f1);
+}
+
 .skip-link {
   position: absolute;
   left: -9999px;

package/src/generators/vue-components/vue-components.spec.ts

@@ -76,6 +76,19 @@ describe('Vue Components Generator', () => {
     expect(agents).toContain('defineModel<boolean>');
   }, 30000);
 
+  it('AppSideMenu exposes an optional #topbar slot for header-action-style content', async () => {
+    await generator(host);
+
+    const sideMenu = host
+      .read('libs/vue-components/src/lib/patterns/AppSideMenu.vue')
+      .toString();
+    // Named slot, only rendered when actually given content -- no empty bar
+    // shows by default, matching the "unused by default" doc claim.
+    expect(sideMenu).toContain('<slot name="topbar" />');
+    expect(sideMenu).toContain('v-if="slots.topbar"');
+    expect(sideMenu).toContain('useSlots');
+  }, 30000);
+
   it('disables vue/no-deprecated-slot-attribute in flat config too, not just .eslintrc.json', async () => {
     // useFlatConfig() (from @nx/eslint) treats a root flat-config file's
     // presence as authoritative, regardless of the installed ESLint version —