CODEWITHSUNDEEP
blazorblazor-webassembly
kouwschottel
kouwschottel

Reputation: 47

Different nav menu for Home page blazor only working after second click?

For a Blazor Server website I'm creating, I try to implement a different nav menu for the home page. To achieve this, I check if the current URL is equal to the BaseURI and, if so, show a different NavMenu than otherwise.

Now the weird thing. It only works if I click the nav menu twice. So for example if I navigate to home, the navmenu stays like if on any other page. If I click on the home button again, the page doesn't refresh but the navmenu is updated to the correct lay-out.

@inject NavigationManager navigationManager 

<div class="top-row pl-4 navbar navbar-dark">
    <a class="navbar-brand" href=""> <img src="image.jpg" alt="Image" height="30" /></a>
    <button class="navbar-toggler" @onclick="ToggleNavMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>

@if (navigationManager.Uri == navigationManager.BaseUri)
{
<div class="@NavMenuCssClass" @onclick="Toggler">
    <ul class="nav flex-row align-items-center">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="1">
                <span class="oi oi-list-people" aria-hidden="true"></span> 1
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="2">
                <span class="oi oi-list-people" aria-hidden="true"></span> 2
            </NavLink>
        </li>
    </ul>
</div>
}
else
{
<div class="@NavMenuCssClass" @onclick="Toggler">
    <ul class="nav flex-row align-items-center">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="1">
                <span class="oi oi-list-people" aria-hidden="true"></span> 1
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="2">
                <span class="oi oi-list-people" aria-hidden="true"></span> 2
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="3">
                <span class="oi oi-list-people" aria-hidden="true"></span> 3
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="4">
                <span class="oi oi-list-people" aria-hidden="true"></span> 4
            </NavLink>
        </li>
    </ul>
</div>
}

@code {
    private bool collapseNavMenu = true;

    private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }

    private void Toggler()
    {
        InvokeAsync(() => { StateHasChanged(); });
    }

}

How can I implement a different lay-out for the navmenu on the homepage without having to click the navigation button twice? Thanks in advance!

Upvotes: 0

Views: 1177

Answers (1)

kouwschottel
kouwschottel

Reputation: 47

The problem was that the navigationManager.Uri doesn't reload it's contents until after the page is rendered. To make sure it does change the Uri, I added the following methods to invoke a re-render if the Uri changed:

private void HandleLocationChanged(object sender, LocationChangedEventArgs e)
{
    StateHasChanged();
}

protected override void OnInitialized()
{
    navigationManager.LocationChanged += HandleLocationChanged;
}

This solved the problem for me :) !

Upvotes: 1

Related Questions