Cant get the correct sidebar behaviour when using FluentNavGroup control

[coderdnewbie]

I can not get the correct sidebar behavior (as compared to the main website) when using FluentNavGroup, when shrunk to mobile device size. (Note: On larger sizes, e.g. desktop sizes, it works correctly.)

I am using the fluentui template and adding the FluentNavGroup to it.

Basically what I get is when I press the group item (the one with the arrow), I see the following (which is correct).

However when I click the arrow, it does not show the sub items, instead it shows the page instead, and I have to click the hamburger menu again and sometimes the sub items are shown.

How did you get it working in the fluent website, where it works properly? Can you provide a simple example as I can not see anything wrong with my code. Thanks.

My code is:

<div class="navmenu">
    <input type="checkbox" title="Menu expand/collapse toggle" id="navmenu-toggle" class="navmenu-icon" />
    <label for="navmenu-toggle" class="navmenu-icon"><FluentIcon Value="@(new Icons.Regular.Size20.Navigation())" Color="Color.Fill" /></label>
    <nav class="sitenav" aria-labelledby="main-menu" onclick="document.getElementById('navmenu-toggle').click();">
        <FluentNavMenu Id="main-menu" Width="250" Collapsible="true" Title="Navigation menu" @bind-Expanded="expanded">
            <FluentNavLink Href="/" Match="NavLinkMatch.All" Icon="@(new Icons.Regular.Size20.Home())" IconColor="Color.Accent">Home</FluentNavLink>
            <FluentNavLink Href="counter" Icon="@(new Icons.Regular.Size20.NumberSymbolSquare())" IconColor="Color.Accent">Counter</FluentNavLink>
            <FluentNavLink Href="weather" Icon="@(new Icons.Regular.Size20.WeatherPartlyCloudyDay())" IconColor="Color.Accent">Weather</FluentNavLink>
            <FluentNavLink Href="efdata" Icon="@(new Icons.Regular.Size20.WalkieTalkie())" IconColor="Color.Accent">EF Data</FluentNavLink>
            <FluentNavLink Href="wizzie" Icon="@(new Icons.Regular.Size20.WalkieTalkie())" IconColor="Color.Accent">Wizzie</FluentNavLink>            
            <FluentNavLink Href="olympics" Icon="@(new Icons.Regular.Size20.WalkieTalkie())" IconColor="Color.Accent">Olympics</FluentNavLink>
            <FluentNavGroup Tooltip="Item 3 tooltip" Icon="@(new Icons.Regular.Size24.EarthLeaf())">
                <TitleTemplate><span style="font-weight: 600">Item 3</span></TitleTemplate>
                <ChildContent>
                    @* <FluentNavLink Icon="@(new Icons.Regular.Size24.LeafOne())" Tooltip="Item 3.1 tooltip">Item 3.1</FluentNavLink>
                    <FluentNavLink Icon="@(new Icons.Regular.Size24.LeafTwo())" Tooltip="Item 3.2 tooltip">Item 3.2</FluentNavLink> *@
                    <FluentNavLink Href="wizzie2" Icon="@(new MyCircle())" Style="color: var(--accent-fill-rest)" Tooltip="Item 3.1 tooltip"><FluentLabel>Item 3.1</FluentLabel></FluentNavLink>
                    <FluentNavLink Href="olympics2" Icon="@(new MyIcon())" Style="color: var(--accent-fill-rest)" Tooltip="Item 3.2 tooltip"><FluentLabel>Item 3.2</FluentLabel></FluentNavLink>
                </ChildContent>
            </FluentNavGroup>
            <FluentNavLink Icon="@(new Icons.Regular.Size20.CalendarAgenda())" Disabled="true" Href="https://microsoft.com" Tooltip="Item 4 tooltip1">Item 4 Disabled</FluentNavLink>
            <FluentNavLink Href="auth" Icon="@(new Icons.Regular.Size20.LockClosedKey())" IconColor="Color.Accent">Auth Required</FluentNavLink>
            <AuthorizeView>
                <Authorized>
                    <FluentNavLink Icon="@(new Icons.Regular.Size20.Patient())" Href="Account/Manage">@context.User.Identity?.Name</FluentNavLink>
                    <form action="Account/Logout" method="post">
                        <AntiforgeryToken />
                        <input type="hidden" name="ReturnUrl" value="@currentUrl" />
                        <FluentButton Type="ButtonType.Submit" Style="width: 100%;">Logout</FluentButton>
                    </form>
                </Authorized>
                <NotAuthorized>
                    <FluentNavLink Icon="@(new Icons.Regular.Size20.PersonAdd())" Href="Account/Register">Register</FluentNavLink>
                    <FluentNavLink Icon="@(new Icons.Regular.Size20.Person())" Href="Account/Login">Login</FluentNavLink>
                </NotAuthorized>
            </AuthorizeView>
        </FluentNavMenu>
    </nav>
</div>

@code {
    private bool expanded = true;

    private string? currentUrl;

    protected override void OnInitialized()
    {
        currentUrl = NavigationManager.ToBaseRelativePath(NavigationManager.Uri);
        NavigationManager.LocationChanged += OnLocationChanged;
    }

    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
    {
        currentUrl = NavigationManager.ToBaseRelativePath(e.Location);
        StateHasChanged();
    }

    public void Dispose()
    {
        NavigationManager.LocationChanged -= OnLocationChanged;
    }
}

[vnbaaij]

The code of the site is part of the repo here. You can find it in the examples folder.

[coderdnewbie]

Thanks, I will try to determine the difference between the example and the template that is provided, as I am using the out of the box template in vs2022. My initial attempts failed which is why I have raised this discussion. If I can see the difference, I will let you know, I raised the discussion in case anyone knew the difference, as it is a source of frustration right now.

I expect it is something in the css for the media group type, but right now, I am not familiar with the css you are using. For example I took the FluentNavGroup code from the examples folder and put it in my proof of concept code (which just uses the default template you provided for vs2022), and it is not working for the mobile size, so it does not look like the problem is in the razor file.

Both sets of code as using 'fluent-nav-item fluent-nav-group' classes, so I am puzzled why the behavior is different and incorrect for the mobile size variant in the fluentui template that you provide. I will keep trying to determine the cause of this difference.

I also tried the example in the Collapsible navigation sub section of the navmenutree section and it is producing the same incorrect behavior when the webpage is shrunk to mobile size.

[coderdnewbie]

I failed to get this to work. I could not find the difference in the css. Will close. If anyone can get this to work, please update this issue.