feat(#3137): add work side menu group

[bdfranck]

This PR adds a Work Side Menu Group to use with the Workspace Side Menu. Features include...

• Toggling the group open and closed
• Using design tokens to style the Work Side Menu Items

Sample code

Sample code

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

    <goa-work-side-menu-item
      icon="list"
      label="Clients"
      url="/clients"
    />

    <goa-work-side-menu-item
      icon="calendar"
      label="Schedule"
      url="/schedule"
    />

    <goa-work-side-menu-group icon="trending-up" heading="Reports">
      <goa-work-side-menu-item
        icon="file-text"
        label="Monthly Report"
        url="/reports/monthly"
      />
      <goa-work-side-menu-item
        icon="bar-chart-2"
        label="Annual Report"
        url="/reports/annual"
      />
    </goa-work-side-menu-group>
  </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>

Known issues

This component currently doesn't work with my brittle keyboard navigation in the Work Side Menu. I've created a bug to address it separately: #3279

[chrisolsen]

@bdfranck I know you love conflicts :)

[bdfranck]

@chrisolsen I've resolved the conflicts... for now. 🤪

[chrisolsen]

I am seeing alignment issues

I am also seeing one of the menus not opening in the right spot

[bdfranck]

@chrisolsen I've amended a commit to fix that menu item label alignment.

The Account menu is a known issue from the original Work Side Menu PR. (#2937) This is only an issue if teams use the menu in odd layouts, which I don't think we want to promote. I can revisit it if a team finds a valid use case.

I've also fixed the merge conflict.

[twjeffery]

Looks good @bdfranck, just a few minor things I see:

1. the text label alignment issue that Chris mentioned still seems to be there for me (text is slightly down of vertically centering with icons. I like the flex-start, so multi line will align properly a the start, but the line height seems to be shifting the label down too much.

2. maybe related to the align-start from #1, the icons all shift slightly up when the menu expands/collapses. removing 270 - align-items: center; seems to fix it.

Screen.Recording.2026-01-19.at.2.36.06.PM.mov

I think this fixes both #1 and #2 above:

A. In WorkSideMenuItem.svelte, remove align-items: center from the collapsed
container query:

@container (max-width: 160px) {                                              
   .menu-item {                                                               
     height: 36px;                                                            
     margin: 0;                                                               
     /* remove: align-items: center; */                                       
     padding-left: calc(var(--goa-space-xs) + 2px);                           
   }                                                                          
 }   

B. In WorkSideMenuItem.svelte, add margin-top to the icon:

  goa-icon {                                                                   
    display: var(--goa-work-side-menu-item-icon-display, flex);                
    margin-top: 2px;                                                           
  }   

C. In WorkSideMenuGroup.svelte, add margin-top to the trailing chevron:

  .trailing-icon {                                                             
    display: flex;                                                             
    margin-top: 2px;                                                           
  }     

This keeps icon positioning consistent between states (no shift) and aligns
the icons with the text's first baseline.

---

3. The line underneath the leading icon that shows the group is slight right of horizontal center from that icon.

4. in Figma we have the parent menu item showing an active state when expanded. I don't know if we need that state to persist, but having the background helps the child items feel closer and related to the parent above them. If we reduce the gap between the parent and the group below it, that could achieve the same thing? I'm curious what you think would be a better design.

5. One last minor thing I noticed: in Figma we have the sub items closer to the vertical line (12px), slightly inset from where the parent label starts. Would we want to change this to be closer? Up to you for what the design should be. It feels a bit spaced out when I see it in something like the account menu (see below).

^Figma^

^Code^

Let me know if you have any questions and/or want to discuss anything.

[bdfranck]

Thanks for the feedback, @twjeffery! I've amended my commit with the following changes:

1. Replaced work-side-menu-item with details and summary elements for better control of the component's state
2. Added top margin to icons
3. Fixed issue where icons shift on close
4. Header has a background when group is open
5. Aligned vertical border beside the child items
6. Reduced left margin of child items

Anything else? Thanks!

[twjeffery]

Looks great to me now @bdfranck! Thanks for making those changes.

One more thing comes up now that might be a bit confusing:

• when a parent menu item is expanded and the side menu is collapsed, the menu item looks active because of that background. Also, when a user clicks on the parent group when the menu is collapsed, it opens and closes, but the user can't see it because the main side menu is collapsed. See video below:

Screen.Recording.2026-01-20.at.12.21.37.PM.mov

In my latest version of the design system website, I made it so if a side menu group is clicked when the side menu is collapsed, the menu opens automatically. thoughts on adding that approach as applicable here? https://goa-website-generation-v2.netlify.app/

[bdfranck]

@twjeffery Good catch! I've updated my commit to remove the background when the menu is collapsed. 👍

Instead of expanding the scope of this ticket, I could create a new one for improving the menu collapsed state. Here's all the ideas that I've captured so far:

• Expand the menu when selecting a group
• Expand the menu on load if a sub-menu item is the current item
• Remember the expanded state between pages (and also between sessions?)
• Collapse the menu when reducing the viewport to tablet width

[twjeffery]

@twjeffery Good catch! I've updated my commit to remove the background when the menu is collapsed. 👍

Instead of expanding the scope of this ticket, I could create a new one for improving the menu collapsed state. Here's all the ideas that I've captured so far:

• Expand the menu when selecting a group
• Expand the menu on load if a sub-menu item is the current item
• Remember the expanded state between pages (and also between sessions?)
• Collapse the menu when reducing the viewport to tablet width

Good idea Benji, approved this version