[dev-v5] Migrate NavMenu component

[MarvinKlein1508]

https://react.fluentui.dev/?path=/docs/components-nav--docs

[MarvinKlein1508]

See also: #2473

[agriffard]

https://fluent2.microsoft.design/components/web/react/core/nav/usage

[vnbaaij]

See also: #2473

We are going to follow the Fluent 2 guidelines for this:

Nav only supports one level of nesting and might not show all available items. If you need to show a deeper and more complex hierarchy, use Tree instead.

So only 2 levels...

We will make it possible to select an active item on navigation.

[MarvinKlein1508]

@vnbaaij I remember a case from another library where determining the active element has been managed by an IsActive and IsCollapsed parameter. This works fine until you raise a StateHasChanged somewhere else in the layout. In my case this has been done buy the notification menu whenever the user has gotten a new notification (they were pulled asynchronously in the background).

This has raised the event within the navigation to refetch the nav-items from the itemprovider which then resulted in the menu being resetted to default again. It would be great if calling StateHasChanged in the MainLayout.razor for example won't have an impact on this and if the first navigation to the any of the pages will trigger the right menu to open/being active.

[dvoituron]

We could create a Func<bool> IsActive parameter so that we can customize how the NavMenu is activated: using an internal variable, a URL route, etc. What do you think?

[vnbaaij]

I've not really thought about how this could be done, but I can imagine there would be an internal 'service' that subscribes to NavigationManager events and then signals the Nav menu that it needs to activate a certain item or something like that

[MarvinKlein1508]

Nav only supports one level of nesting and might not show all available items. If you need to show a deeper and more complex hierarchy, use Tree instead.

Using tree has one downside which can already been seen in the current v5 demo. Since this component relies on OnClick handlers you cannot right click the menu entries and copy the link or open it in a new tab (which for a navigation is pretty bad). Also this links will be completely hidden from Google.

The event approach sounds interesting for me. I've never tried to use this kind of approach. I think it didn't even exist back when I started with Blazor in .NET 3.1.

When you start a PR for this (draft as well) - can you also add me to the PR? I would like to check out your approach and test some things.

[vnbaaij]

Using tree has one downside which can already been seen in the current v5 demo. Since this component relies on OnClick handlers you cannot right click the menu entries and copy the link or open it in a new tab (which for a navigation is pretty bad). Also this links will be completely hidden from Google.

We want to follow what is in the Fluent guidelines and that says two levels. Extending it to more levels or creating a new (tree based) component to deliver a deeper level of navigation is, I think, a good candidate for the community toolkit.

The event approach sounds interesting for me. I've never tried to use this kind of approach. I think it didn't even exist back when I started with Blazor in .NET 3.1.

It is just an idea for now. Haven't really tested it yet. 😁