Dynamic NavMenu

Question

I am trying to implement the default NavMenu.razor with a number of NavLinks where one of the items is not visible by default. It should only become visible after an authenticated user belonging to a specific role condition is true. My code snippet is below. It seems a challenge of refreshing the navmenu. I have attempted implementing StateHasChanged() at various points without success. Kindly advise.

@if (authService.isinTargetRole)

{

<NavLink class="nav-link" href="targetPage")>

    <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Target Page

</NavLink>

} else

{

<NavLink class="nav-link" href="targetPage" hidden>

    <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Target Page

</NavLink>                

}

Answer 1

for the NavMenu to re-render, you need to trigger a state change for the component. your code could update one of its properties, or your nav component could register an event handler for authentication state change, and then trigger a state change for the component when the authentication state changes.