feat(#2893): add open prop to WorkSideMenuGroup

[Copilot]

Before (the change)

• Work Side Menu Group's open state was not publicly accessible
• A group with a current menu item remains closed

After (the change)

• Work Side Menu Group has an open property
• A group with a current menu item opens

Test scenarios

1. Render GoabxWorkSideMenuGroup with open={true}. Group should be open on mount.
2. Render with open={false}. Group should be closed on mount.
3. Render with no open property. Group should be closed on mount.
4. Manually click the group header. The group should toggle open and closed.

AI Workflow

This PR was created with the help of Copilot. Here's what I did:

1. Assigned to Copilot with the below prompt
2. Gave a couple follow-up prompts
3. Squashed the commits from Copilot
4. Refined and tested the results by hand

Original Copilot prompt

---

This section details on the original issue you should resolve

<issue_title>Add open prop to WorkSideMenuGroup</issue_title>
<issue_description>## Description

The WorkSideMenuGroup component has no open prop to control its initial expanded/collapsed state. The open state is managed internally via a native <details> element and cannot be set from outside.

This means navigation patterns like "auto-expand the group when the user is on a child page" aren't possible.

Expected behavior

WorkSideMenuGroup should accept an open prop (string, default "false") that sets the initial expanded state. User interaction (clicking to collapse/expand) should still work after initialization.

Use case

The docs website "Get Started" section uses WorkSideMenuGroup with three sub-pages (Early Adopters, Designers, Developers). When navigating to any get-started page, the group should be expanded so the user can see which sub-page is active.

Potential suggested implementation from Claude

Svelte (WorkSideMenuGroup.svelte):

export let open: string = "false";

$: _open = toBoolean(open);

React wrapper: Add open?: boolean prop, pass through as string attribute.

Angular wrapper: Add @Input() open binding.

Usage in docs (ParentMenu.tsx):

<GoabxWorkSideMenuGroup 
    heading={section.label} 
    icon={section.icon} 
    open={isActive} 
>

Acceptance Criteria

1. Add open property to GoabxWorkSideMenuGroup
2. Add functionality to expand the group if a child item is selected
   • This needs to take into account a group within a group as well (and further down the list)</issue_description>

<agent_instructions>Start by adding the open property to the Svelte component and the experimental React and Angular wrappers. Then give me a plan of how to open the group if it contains a current nav item. </agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes Add open prop to WorkSideMenuGroup #3398

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[netlify]

✅ Deploy Preview for goa-design-2 ready!

Name	Link
🔨 Latest commit	1e8142f
🔍 Latest deploy log	https://app.netlify.com/projects/goa-design-2/deploys/69a0bda2aae2d6000856560c
😎 Deploy Preview	https://deploy-preview-3460--goa-design-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[bdfranck]

@copilot Add a menu group test to libs/react-components/specs/work-side-menu.browser.spec.tsx as well.

[Copilot]

@copilot Add a menu group test to libs/react-components/specs/work-side-menu.browser.spec.tsx as well.

Added a WorkSideMenuGroup describe block to work-side-menu.browser.spec.tsx with two tests: one verifying the group is expanded when open={true} and another verifying it's collapsed when open={false}. Commit: 6e9cead

[bdfranck]

@copilot The WorkSideMenuItem fires a bubbling _itemCurrent event when an item is current. The group should watch for that event and toggle the group open when it receives it.

[Copilot]

@copilot The WorkSideMenuItem fires a bubbling _itemCurrent event when an item is current. The group should watch for that event and toggle the group open when it receives it.

Done in commit 5de79d4. WorkSideMenuGroup now listens for the bubbling _itemCurrent event (dispatched by WorkSideMenuItem when it becomes the active page) and sets _open = true. This means groups containing a current nav item will automatically expand on load, and works recursively for nested groups since the event bubbles up through all ancestor groups.

[bdfranck]

@copilot Add feat3398 sandbox pages to apps/prs/angular/src/routes/features and apps/prs/react/src/routes/features. It should allow a usesr to toggle the side menu group open and closed with a button.

[Copilot]

@copilot Add feat3398 sandbox pages to apps/prs/angular/src/routes/features and apps/prs/react/src/routes/features. It should allow a usesr to toggle the side menu group open and closed with a b...

Added feat3398 sandbox pages in commit b452bb0:

• React: apps/prs/react/src/routes/features/feat3398.tsx — renders a GoabxWorkSideMenuGroup with a "Open group / Close group" button that toggles the open prop
• Angular: apps/prs/angular/src/routes/features/feat3398/ — same demo using GoabxWorkSideMenuGroup with [open]="groupOpen" and a goab-button to toggle it

Both pages are wired into their respective routers and nav menus as 3398 WorkSideMenuGroup open prop.

[willcodeforcoffee]

Everything looks good. I'm wondering though, could the watchPathChanges issue you had be caused because it is called twice in OnMount?

[bdfranck]

Thanks, @willcodeforcoffee! I've amended my fix commit with only one call to watchPathChanges. 👍

[willcodeforcoffee]

👍 Great stuff, Benji! LGTM