feat(#2478): add work side menu component #2937

bdfranck · 2025-07-31T17:47:51Z

This PR adds the work side menu component.

How to test

Use the v2 experimental design tokens branch for proper colours and border values:
https://github.com/GovAlta/design-tokens/tree/v2-2998-coded-component-updates

Add this example menu to your playground:

<goa-work-side-menu
  url="/"
  heading="Income and Employment Support (IES)"
  user-name="Edna Mode"
  user-secondary-text="edna.mode@example.com"
>
  <div slot="primary">
    <goa-work-side-menu-item icon="search" label="Search" badge="21" url="/search">
      <goa-work-side-menu-item url="/sub1" variation="submenu" label="Sub menu item">
      </goa-work-side-menu-item>

      <goa-work-side-menu-item url="/sub2" variation="submenu" label="Sub menu item" />

      <goa-work-side-menu-item url="/sub3" variation="submenu" label="Sub menu item" />
    </goa-work-side-menu-item>

    <goa-work-side-menu-item
      icon="list"
      label="Clients"
      type="success"
      badge="New"
      current="true"
      url="/clients"
    />

    <goa-work-side-menu-item
      icon="calendar"
      label="Schedule"
      type="emergency"
      badge="Urgent"
      url="/schedule"
    />
  </div>

  <div slot="secondary">
    <goa-work-side-menu-item
      icon="notifications"
      label="Notifications"
      type="success"
      badge="1"
      url="/notifications"
    />

    <goa-work-side-menu-item icon="help-circle" label="Support" url="/support" />

    <goa-work-side-menu-item icon="settings" label="Settings" url="/settings" />
  </div>

  <div slot="account">
    <goa-work-side-menu-item icon="person" label="Account management" url="/account" />

    <goa-work-side-menu-item icon="log-out" label="Log out" url="/logout" />
  </div>
</goa-work-side-menu>

ArakTaiRoth · 2025-09-16T18:00:55Z

libs/angular-components/src/lib/components/work-side-menu-item/work-side-menu-item.ts

@@ -0,0 +1,34 @@
+import { GoabWorkSideMenuItemType, GoabWorkSideMenuItemVariation } from "@abgov/ui-components-common";


Just adding all of these at the top of this file, this is not indicative of where the issue is located.

Missing exports for Angular in "index.tsx"

GoabWorkSideMenuItem is exported as GoabAWorkSideMenuItem in React

URL is listed as required for WorkSideMenuItem for React

URL is listed as required for WorkSideMenu for React

Popover for User account is not positioned inside container - maybe not an issue, discuss with @twjeffery, it appears in the container if the side menu is pinned to the left of the window.

If Side Menu is pinned to the left, Popover opens up directly over top of the link, not above or below - maybe not an issue, discuss with @twjeffery

Tooltips in condensed menu are not positioned inside the container - maybe not an issue, discuss with @twjeffery , it appears in the container if the side menu is pinned to the left

Doesn't seem to be a way to activate side-menu-items that don't have a URL, but have submenus inside of them, I would expect it to expand to show the submenus

No way to provide a click event for Sub Menu Items that don't have a URL

Don't know how to re-open SideMenu on a mobile device - discuss with @chrisolsen if our current solution of providing an event to trigger, rather than a variable is what we want

@ArakTaiRoth I've amended my commit with updates to the React and Angular wrappers. I've tested both wrappers and they appear to work as expected for me.

Here's how the sub nav works for me:

I'm leaving the onClick events and alignment issues for now. I'll wait for @chrisolsen's feedback on the overall component before I work on those details as some may not be relevant.

@bdfranck When you referenced "alignment issues" are you referring to the slight shifting of things when expanding and collapsing?

The known issue is that the overlays assume the menu is in the top left of the viewport without any margins or padding. This is true with all the Figma mockups so far.

The tooltip and menu overlays use fixed positioning, so they look fine when the menu is in the top left...

But they are misaligned when the menu is not:

@ArakTaiRoth I realized that the issue with the menu item submenu and click event were because I changed the url to optional. I only did it so I could reuse the menu item for a toggle button.

I can't think of any good scenario why a team would want to have a nav item without a url. It only introduces issues. So I made the following changes and amended my commit:

Made the url property required on the work-side-menu-item and the wrappers

Changed the menu toggle item from a work-side-menu-item to a button

This should address the issues that you previously mentioned.

libs/web-components/src/components/work-side-menu/WorkSideMenu.svelte

chrisolsen · 2025-09-18T18:51:26Z

libs/angular-components/src/lib/components/work-side-menu-item/work-side-menu-item.ts

@@ -0,0 +1,34 @@
+import { GoabWorkSideMenuItemType, GoabWorkSideMenuItemVariation } from "@abgov/ui-components-common";


@bdfranck When you referenced "alignment issues" are you referring to the slight shifting of things when expanding and collapsing?

libs/react-components/src/experimental/work-side-menu-item/work-side-menu-item.spec.tsx

libs/web-components/src/components/work-side-menu/WorkSideMenu.svelte

libs/web-components/src/components/work-side-menu/WorkSideMenuItem.spec.ts

libs/web-components/src/components/work-side-menu/WorkSideMenuItem.svelte

libs/web-components/src/components/work-side-menu/doc.md

libs/web-components/src/index.ts

libs/react-components/specs/work-side-menu.browser.spec.tsx

libs/react-components/src/experimental/work-side-menu-item/work-side-menu-item.tsx

bdfranck · 2025-09-24T22:11:50Z

@chrisolsen I addressed all your comments and pushed an amended commit. I've also added browser tests for testing events in the menu and menu item. Does the location of the Angular experimental folder make sense? Any further questions or concerns? Thanks!

bdfranck · 2025-09-25T14:48:05Z

@chrisolsen I addressed all your comments and pushed an amended commit. I've also added browser tests for testing events in the menu and menu item. Does the location of the Angular experimental folder make sense? Any further questions or concerns? Thanks!

bdfranck · 2025-09-25T15:28:05Z

I also noticed some formatting issues. I fixed them and pushed an amended commit.

twjeffery · 2025-10-06T20:34:32Z

@bdfranck

1. Back button
Sounds good

2. Submenu items
Sounds good

3. Menu state persistence
For sure, it might be a playground issue that wouldn't be an issue for teams. I am using multiple pages in my playground.

4. Keyboard navigation for the account menu
For sure. Maybe this should be pulled out to a separate issue for the popover?

twjeffery

Great work @bdfranck, I pulled in the changes and noticed a few more small things, added as comments

libs/web-components/src/components/work-side-menu/WorkSideMenu.svelte

libs/angular-components/src/index.ts

twjeffery

@bdfranck Just one small potential update, looks good

libs/web-components/src/components/work-side-menu/WorkSideMenu.svelte

libs/react-components/src/experimental/work-side-menu/work-side-menu.tsx

bdfranck · 2025-10-10T16:47:47Z

Thanks, @vanessatran-ddi! I've amended the commit and switched to using skewer case on those properties.

vanessatran-ddi · 2025-10-10T23:21:22Z

libs/angular-components/src/experimental/index.ts

@@ -0,0 +1,2 @@
+export * from "./work-side-menu/work-side-menu";


I test with angular and have this error:

I tried with import { GoaxWorkSideMenu, GoaxWorkSideMenuItem } from "@abgov/angular-components"; and import { GoaxWorkSideMenu, GoaxWorkSideMenuItem } from "@abgov/angular-components/experimental"; but it doesn't work. I need to add my own code like below screenshot under libs/angular-components/index.ts` in order to test

I think for React, it is working that way because we have libs/react-components/package.json where we export the experimental so React app can import from this path, however in angular we don't have it set up now. We need to setup more to allow users import from experimental path.

vanessatran-ddi · 2025-10-10T23:26:17Z

libs/web-components/src/components/work-side-menu/WorkSideMenu.svelte

@@ -0,0 +1,812 @@
+<svelte:options


QA result for accessibility:

workspace-sidemenu.mov

There are 2 problems:

I press "Arrow Down" to move from Dashboard -> Project ->....-> Help & Suport -> John Doe (username), I need to press "Tab" if I want to focus on username. Expectation: I think we should be able to press Arrow Down to continue to focus on John Doe instead of Tab

When I press Enter after I focus on Jonh Doe (username), I can see the Menu displayed where I can arrow up and down to select options "My Profile", "Preferences" and "Sign Out" which is great. However, if I continue to Arrow Down, it move to Collapse Menu or Arrow Up, it moves to Analytics, without closing the menu. Expectation: I think we should auto-close the menu under username if we don't focus on it

@bdfranck This is my angular code:

<div style="height: 100vh; display: flex;"> <goax-work-side-menu heading="My Application" url="/" userName="John Doe" userSecondaryText="john.doe@gov.ab.ca" testId="workspace-side-menu" [primaryContent]="primaryMenu" [secondaryContent]="secondaryMenu" [accountContent]="accountMenu" > </goax-work-side-menu> <div style="flex: 1; padding: 2rem; overflow-y: auto;"> <h1>Workspace Side Menu Demo</h1> <p>This is a demonstration of the Workspace Side Menu component.</p> </div> </div>  <ng-template #primaryMenu> <goax-work-side-menu-item url="#dashboard" label="Dashboard" icon="home" /> <goax-work-side-menu-item url="#projects" label="Projects" icon="folder" badge="3" type="success" /> <goax-work-side-menu-item url="#team" label="Team" icon="people" /> <goax-work-side-menu-item url="#calendar" label="Calendar" icon="calendar" badge="5" type="emergency" /> <goax-work-side-menu-item url="#documents" label="Documents" icon="document" [divider]="true" /> <goax-work-side-menu-item url="#analytics" label="Analytics" icon="stats-chart" /> </ng-template>  <ng-template #secondaryMenu> <goax-work-side-menu-item url="#settings" label="Settings" icon="settings" /> <goax-work-side-menu-item url="#help" label="Help & Support" icon="help-circle" /> </ng-template> <ng-template #accountMenu> <goax-work-side-menu-item url="#profile" label="My Profile" icon="person" /> <goax-work-side-menu-item url="#preferences" label="Preferences" icon="cog" /> <goax-work-side-menu-item url="#logout" label="Sign Out" icon="log-out" /> </ng-template>

vanessatran-ddi · 2025-10-10T23:37:06Z

libs/web-components/src/components/work-side-menu/WorkSideMenu.svelte

@@ -0,0 +1,812 @@
+<svelte:options


Screen reader:
I checked the below reference: when we have a collapse menu, press the menu, and display options, I think we should have a way to tell users:
https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/

I think we can do that by aria-expanded..

Right now, this is what happening if I use the Voice Over:

voiceover-workspace-menu.mov

There are no difference between Button Group inside the User's Menu and button group inside the Workspace side menu. When I checked some resources on W3 https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/, expanded or colapse is a good hint here, some resources also mentioned: You are on the XX item, level 2 (for example)

vanessatran-ddi · 2025-10-10T23:42:55Z

libs/web-components/src/components/work-side-menu/WorkSideMenu.svelte

@@ -0,0 +1,812 @@
+<svelte:options
+  customElement={{


Accessibility tested on Windows - Edge 141 latest:

When I navigate by keyboard, I "Tab" to focus on username John Doe , I press "Enter" to open the Menu, I arrow up/down to focus on the menu item inside, The screen reader announces I am on "Log out", "Preferences"... but I cannot see the item yellow/highlight.

accessibility-windows-workspace-menu.mov

vanessatran-ddi · 2025-10-10T23:58:16Z

libs/react-components/src/experimental/work-side-menu-item/work-side-menu-item.tsx

+  }
+}
+
+/* eslint-disable-next-line */


Question: do we need this comment to disable eslint? I don't see any obvious eslint error here.

vanessatran-ddi

Some comments about accessibility testing.

bdfranck marked this pull request as draft July 31, 2025 17:49

bdfranck force-pushed the benjifranck/2478-workspace-side-menu branch 2 times, most recently from cd20c58 to 42fa52c Compare September 5, 2025 22:32

bdfranck changed the title ~~WIP feat(#2478): add work side menu component~~ feat(#2478): add work side menu component Sep 8, 2025

bdfranck requested a review from chrisolsen September 8, 2025 15:35

bdfranck force-pushed the benjifranck/2478-workspace-side-menu branch 3 times, most recently from 4779b0d to 92ef9ee Compare September 8, 2025 22:13

bdfranck linked an issue Sep 9, 2025 that may be closed by this pull request

Workspace Side Menu: New component #2478

Open

bdfranck marked this pull request as ready for review September 9, 2025 18:00

bdfranck force-pushed the benjifranck/2478-workspace-side-menu branch from 92ef9ee to a621a80 Compare September 10, 2025 03:01

bdfranck marked this pull request as draft September 10, 2025 15:01

bdfranck force-pushed the benjifranck/2478-workspace-side-menu branch from a621a80 to 7408642 Compare September 10, 2025 15:07

bdfranck marked this pull request as ready for review September 10, 2025 15:13

ArakTaiRoth self-requested a review September 15, 2025 15:34

ArakTaiRoth reviewed Sep 16, 2025

View reviewed changes

bdfranck force-pushed the benjifranck/2478-workspace-side-menu branch 2 times, most recently from 5fd66cf to bd2296c Compare September 17, 2025 15:27

chrisolsen reviewed Sep 18, 2025

View reviewed changes

bdfranck force-pushed the benjifranck/2478-workspace-side-menu branch 2 times, most recently from dcaafd1 to 2f8be46 Compare September 23, 2025 22:55

chrisolsen reviewed Sep 24, 2025

View reviewed changes

bdfranck force-pushed the benjifranck/2478-workspace-side-menu branch 3 times, most recently from a9ee85d to fce252b Compare September 24, 2025 21:31

bdfranck requested a review from chrisolsen September 24, 2025 22:10

bdfranck force-pushed the benjifranck/2478-workspace-side-menu branch from fce252b to d3a339f Compare September 25, 2025 15:26

twjeffery requested changes Oct 6, 2025

View reviewed changes

bdfranck force-pushed the benjifranck/2478-workspace-side-menu branch from d9bc5b7 to 3a8395a Compare October 6, 2025 21:14

chrisolsen reviewed Oct 6, 2025

View reviewed changes

libs/angular-components/src/index.ts Show resolved Hide resolved

bdfranck requested a review from twjeffery October 6, 2025 21:20

twjeffery previously approved these changes Oct 7, 2025

View reviewed changes

libs/web-components/src/components/work-side-menu/WorkSideMenu.svelte Show resolved Hide resolved

bdfranck dismissed twjeffery’s stale review via 15b581e October 7, 2025 14:32

bdfranck force-pushed the benjifranck/2478-workspace-side-menu branch from 3a8395a to 15b581e Compare October 7, 2025 14:32

bdfranck requested a review from twjeffery October 7, 2025 14:32

bdfranck force-pushed the benjifranck/2478-workspace-side-menu branch from 15b581e to 1a1e834 Compare October 7, 2025 14:35

bdfranck requested a review from chrisolsen October 7, 2025 14:36

twjeffery previously approved these changes Oct 7, 2025

View reviewed changes

vanessatran-ddi mentioned this pull request Oct 7, 2025

Search page #2606

Open

vanessatran-ddi reviewed Oct 9, 2025

View reviewed changes

libs/react-components/src/experimental/work-side-menu/work-side-menu.tsx Outdated Show resolved Hide resolved

bdfranck dismissed twjeffery’s stale review via e75ad09 October 10, 2025 16:29

bdfranck force-pushed the benjifranck/2478-workspace-side-menu branch from 1a1e834 to e75ad09 Compare October 10, 2025 16:29

chrisolsen requested review from twjeffery and vanessatran-ddi October 10, 2025 17:14

vanessatran-ddi reviewed Oct 10, 2025

View reviewed changes

vanessatran-ddi requested changes Oct 11, 2025

View reviewed changes

bdfranck force-pushed the benjifranck/2478-workspace-side-menu branch 3 times, most recently from 4e7c939 to d2d06bd Compare October 14, 2025 21:27

feat(#2478): add workspace side menu component

8615c83

bdfranck force-pushed the benjifranck/2478-workspace-side-menu branch from d2d06bd to 8615c83 Compare October 14, 2025 21:55

		@@ -0,0 +1,34 @@
		import { GoabWorkSideMenuItemType, GoabWorkSideMenuItemVariation } from "@abgov/ui-components-common";

		@@ -0,0 +1,2 @@
		export * from "./work-side-menu/work-side-menu";

feat(#2478): add work side menu component #2937

Are you sure you want to change the base?

feat(#2478): add work side menu component #2937

Conversation

bdfranck commented Jul 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

How to test

Uh oh!

ArakTaiRoth Sep 16, 2025 • edited by bdfranck Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bdfranck commented Sep 24, 2025

Uh oh!

bdfranck commented Sep 25, 2025

Uh oh!

bdfranck commented Sep 25, 2025

Uh oh!

twjeffery commented Oct 6, 2025

Uh oh!

twjeffery left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

twjeffery left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

bdfranck commented Oct 10, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vanessatran-ddi left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

bdfranck commented Jul 31, 2025 •

edited

Loading

ArakTaiRoth Sep 16, 2025 •

edited by bdfranck

Loading

twjeffery left a comment •

edited

Loading