fix: Active class css in FluentNavLink and FluentNavGroup with click callbacks

[Tyme-Bleyaert]

🐛 Bug Report

When using either FluentNavLink or FluentNavGroup when also using OnClick event callback, the active css class is not applied.

🤔 Expected Behavior

When clicking a link we should still see which page we are on.

😯 Current Behavior

Currently when you have an eventcallback for example closing an hamburger menu, the active class css is ignored.

[vnbaaij]

Hi @Tyme-Bleyaert,please supply something we (I, as Denis is on vacation) can easily copy/paste/run in the demo site

[Tyme-Bleyaert]

<FluentStack Orientation="Orientation.Horizontal" >
    <!-- Menu item without callback -->
    <FluentNavMenu>
        <FluentNavLink Href="/issue-tester">Item 1</FluentNavLink>
    </FluentNavMenu>

    <!-- Menu item with event callback -->
    <FluentNavMenu>
        <FluentNavLink Href="/issue-tester" OnClick="OnClick" >Item 1</FluentNavLink>
    </FluentNavMenu>

</FluentStack>
@code{
    private void OnClick()
    {
        
    }
}

[Tyme-Bleyaert]

Problem: The "active" CSS is only applied when using NavLink, not when using a custom click handler.
Solution: Manually check if the link is active and append the active class in the else branch.
https://github.com/microsoft/fluentui-blazor/blob/7c60618b03f75b73873c4c8c1a7ce6ad11ef9e1c/src/Core/Components/NavMenu/FluentNavLink.razor#L10C8-L35C11

[Tyme-Bleyaert]

Maybe we can let Copilot handle this? Should be pretty easy.

[vnbaaij]

This is actually not that easy at all :)...See PR #3999