[FluentNavMenu] Show child items via FluentMenu when collapsed

[hksalessio]

Pull Request

📖 Description

This pull request adds the ability for the FluentNavMenu to display child items (FluentNavGroup, FluentNavLink) when collapsed. See following image for a better explanation:

The feature can be tested in the "Collapsible Navigation Example" section of the "NavMenu" page.

🎫 Issues

In issue #1528, @AlthalusDGr8 asked for this exact feature as it is included in WinUI 3.

👩‍💻 Reviewer Notes

This is nothing but a quick, first implementation of this feature.
Although displaying the menu already works, it still needs some refinement and polishing.
For example, the links in the menu are not even clickable yet (i.e. they don't do anything) and I have modified FluentMenu for convenience reasons but I don't know whether this is desired by you.
I guess, most variables should be renamed properly as well.

📑 Test Plan

I have not yet checked, whether existing tests fail or succeed.

✅ Checklist

General

• I have added tests for my changes.
• I have tested my changes.
• I have updated the project documentation to reflect my changes.
• I have read the CONTRIBUTING documentation and followed the standards for this project.

Component-specific

• I have added a new component
• I have added Unit Tests for my new compontent
• I have modified an existing component
• I have validate Unit Tests for an existing component

⏭ Next Steps

I will continue to work on this feature over the next few days (maybe weeks, depends on how much time I can find). You are still welcome to review the changes I made up until this point or modify my code in any way.

[vnbaaij]

Hi,
I think this could make for a great addition! To not break current implementations, it should probably be opt-in by setting a specific parameter to true/false. There also needs to be a solution for items that do not have an icon, as they are not shown in the collapsed state.

As you are still working on it, I'll convert the PR to have a 'draft' status.

[hksalessio]

@vnbaaij This is now basically feature complete except for one thing: Should links and groups without an icon on the first layer simply be hidden when the FluentNavMenu is collapsed?

[vnbaaij]

Yes, I think those should be hidden when collapsed

[vnbaaij]

Hi @hksalessio, Any idea when you can wrapthisup? No rush, just curious.

[hksalessio]

Hi @vnbaaij, now :D Looking forward to your review! There are probably still some things to work out. Tests have been verified, though.

[vnbaaij]

Love it. Couple of name changes but nothing shocking.

[vnbaaij]

@hksalessio Thanks for this. It has been merged!

Can you create an additional PR where you work on accessibility (a11y) challenges for this addition?

[dvoituron]

@hksalessio About this PR a11y, 2 tasks need to be checked:

1. The user interface output, using https://accessibilityinsights.io/downloads
2. Keyboard navigation, to enable selection of a menu item using the Tab or KeyUp/KeyDown keys.

[hksalessio]

@vnbaaij @dvoituron I will look into it!