Closing nested dropdowns in sliding navigation dismisses overlay

[jmuzina]

Describe the bug

When closing a nested dropdown of a sliding navigation bar, the dark overlay tint that is applied to the body is dismissed, even though a dropdown is still open.

To Reproduce

Steps to reproduce the behavior:

1. Go to sliding nav example
2. Expand the LXCFS dropdown
3. See that the dark overlay is applied to the page.
4. Expand the Nested Layer dropdown within the LXCFS dropdown.
5. See that the dark overlay is still present.
6. Collapse the Nested Layer dropdown.
7. See that the dark overlay has been dismissed.

Expected behavior

The dark overlay is present whenever a dropdown is opened.

Screenshots

https://github.com/user-attachments/assets/ac5cbb54-6ffc-497c-82cc-7797717961ae

Additional context

I suspect this problem may come from dismissing is-active on too many elements in the collapse handler.

This was noticed in #5110 in this comment.

[syncronize-issues-to-jira[bot]]

Thank you for reporting us your feedback!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-14041.

This message was autogenerated

[advl]

After an initial read, I have come to understand the following :

1. The shadow is defined in the class has-menu-open https://github.com/canonical/vanilla-framework/blob/9e1aff381e97ce29fe0ad7f245a9fbfeceb1f3e0/scss/_patterns_navigation.scss#L840
2. There is currently no event handler attached to secondary menu items in the navigation script

The solution would be to listed to click events on the collapse handler to properly toggle the has-menu-open class.

Additionally, this raises the question of whether we could have navigation items that do not intend to close the menu (e.g. a toggle as a menu item). In that case the solution would be the same, including a more specific query selector.

[bartaz]

Nested dropdowns are not officially supported on desktop navigation (and are just a side-effect of having sliding navigation on mobile).

If we can find a low effort solution it may be worth fixing. Otherwise I think we should drop this, and revisit when implementing navigation in new architecture.