fix: Unexpected Expansion of FluentNavMenu on Mobile When Accessing FluentNavGroup Submenus

[martingagne]

🐛 Bug Report

💻 Repro or Code Sample

https://github.com/martingagne/fluentblazor-navmenu

• Access the application.
• Collapse the FluentNavMenu by clicking on the menu toggle.
• Tap on the "Settings Group" within the FluentNavMenu.
• Observe that the entire menu expands rather than just showing the submenu links under "Settings Group".

🤔 Expected Behavior

When the FluentNavMenu is in a collapsed state, tapping on a FluentNavGroup title (e.g., "Settings Group") should only display the submenu items associated with that group without expanding the entire menu. This behavior should allow users to navigate through grouped links (submenus) while maintaining a clean, collapsed main menu interface.

😯 Current Behavior

Currently, when the FluentNavMenu is collapsed and the "Settings Group" is tapped, the entire navigation menu expands. This behavior deviates from the expected mobile-friendly functionality where only the submenu should become visible, allowing the user to remain within the compact, collapsed view of the overall menu.

🔦 Context

Trying to get my Blazor Server app to look and work nicely on mobile.

🌍 Your Environment

• .NET 8
• Fluent UI Blazor library Version 4.7.2

[vnbaaij]

I can't run your code as I'm not going to be at a pc for a couple of days, but going on your description it seems like what you want is what the menu on the demo site does in mobile view. Have you seen that and is that indeed how you want it to work?

[martingagne]

Hi Vincent, Thank you for getting back to me! There's no rush—please enjoy your time away from the computer. Regarding the menu behavior, I've noticed that both the demo site and what I quickly coded for the repro exhibit the same behavior. It's a bit surprising to see the entire menu reopen when selecting a group's submenu in a collapsed state. Maybe it's just me, but I find that a bit odd. I’m definitely not a UX designer, so I might be missing something about why it’s designed this way. Thanks again for your help and take your time! Martin

…

On Tue, May 7, 2024 at 11:56 PM Vincent Baaij ***@***.***> wrote: I can't run your code as I'm not going to be at a pc for a couple of days, but going on your description it seems like what you want is what the menu on the demo site does in mobile view. Have you seen that and is that indeed how you want it to work? — Reply to this email directly, view it on GitHub <#2022 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEGWKMBJTTNW2GAL3HN5MJTZBHEATAVCNFSM6AAAAABHMIDT2CVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAOJZHA3TEMRYGE> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[vnbaaij]

I don't understand what you mean with the 'entire menu reopening'.

This is what I see on my Android device in Edge: https://github.com/microsoft/fluentui-blazor/assets/1761079/7df64e40-0f62-48cb-a634-a80fbaca8379

[martingagne]

Sorry @vnbaaij. I clearly did not explain this correctly. Here's a video.

Recording.2024-05-10.102953.mp4

You will see that when I click on "Settings", the left nav fully expand. Is this the expected behavior?

[vnbaaij]

Yes, that is the expected behavior.

When the menu itself is collapsed, you only see the 1st level items (and only if they have an icon) there is be no way to distinguish between 1st and 2nd level items if we would show them in this collapsed state as well when you expand an item with children.
The only indication to see it is an item with subitemss is the arrow on the right of the 'parent' item

[c0g1t8]

Please don't change this behavior. I have a large number of menu items in my application. Some of the sub menus are very similar so the context is very important.

[vnbaaij]

I have no intention of changing that behavior.

Closing this as it is not an issue but intended behavior.