What is the most efficient way of chaging the Blazor NavMenu according to the web page we are in? - dynamic

Question

I was needing a way to display certain options on the Blazor NavMenu according to the webpage i was in.
There is a similar question on StackOverflow that helped me out archieving this
Exchange Data between Page and NavMenu in Blazor
But I wanted a specific topic on how to do this(Dynamic NavMenu according to the page) and i'll post my solution to get some feedback if this is the correct way of doing it and also to help others with the same doubt. The following article helped me a lot too:
https://chrissainty.com/3-ways-to-communicate-between-components-in-blazor/

Answer 1

So, my solution is the following.
First i created a class to manage the content of NavManeu and allow communicatin between the pages and NavMenu
public class NavMenuState
{
//The items for the NavMenu that will have the display name[0] and url[1] in a list of a string array
public List<string[]> MenuItems { get; private set; } = new();
//The last location that was clicked
public string Location { get; private set; } = "";
public event Action OnChange;
//Allow pages to set neu menu items for that page
public void SetNewMenu(List<string[]> newMenuItems)
{
MenuItems = newMenuItems;
NotifyStateChanged();
}
//Alow pages to add items to the menu
public void AddMenuItem(string[] newMenuItem)
{
MenuItems.Add(newMenuItem);
NotifyStateChanged();
}
//Triggred when clicked in a navmenu item
public void Navigation(string url)
{
//Check if the location if different, otherwise keep the same apearance
if (url!=Location)
{
Location = url;
List<string[]> vs = new();
string[] vs1 = new string[2];
vs1[0] = "Inicio";
vs1[1] = "";
vs.Add(vs1);
vs1 = new string[2];
vs1[0] = "Counter";
vs1[1] = "counter";
vs.Add(vs1);
vs1 = new string[2];
vs1[0] = "Fetchdata";
vs1[1] = "fetchdata";
vs.Add(vs1);
vs1 = new string[2];
vs1[0] = "Utilizador";
vs1[1] = "genericform/utilizador";
vs.Add(vs1);
MenuItems = vs;
NotifyStateChanged();
}
}
private void NotifyStateChanged() => OnChange?.Invoke();
//Creates the base menu to be displayed on the website first render
public NavMenuState()
{
Navigation("Inicio");
}
}
Then register this class as a singleton
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
//Register as singleton
builder.Services.AddSingleton<NavMenuState>();
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
await builder.Build().RunAsync();
}
}
The NavMenu component. -> Every time I click a menu item it resets the NavMenu items(or tries to).
#using MecanicoAppSqlite.Shared
#inject NavMenuState NavState
#implements IDisposable
<div class="top-row pl-4 navbar navbar-dark">
<a class="navbar-brand" href="">MecanicoAppSqlite</a>
<button class="navbar-toggler" #onclick="ToggleNavMenu">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="#NavMenuCssClass" #onclick="ToggleNavMenu">
<ul class="nav flex-column">
#if (NavState.MenuItems != null)
{
#foreach (string[] menuItem in NavState.MenuItems)
{
<li class="nav-item px-3">
<NavLink class="nav-link" #onclick="()=>LocationChanged(menuItem[1])" href="#menuItem[1]">
<span class="oi oi-list-rich" aria-hidden="true"></span> #menuItem[0]
</NavLink>
</li>
}
}
</ul>
</div>
#code {
private bool collapseNavMenu = true;
private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
private void ToggleNavMenu()
{
collapseNavMenu = !collapseNavMenu;
}
protected override void OnInitialized()
{
NavState.OnChange += StateHasChanged;
}
public void Dispose()
{
NavState.OnChange -= StateHasChanged;
}
public void LocationChanged(string url)
{
NavState.Navigation(url);
}
}
Then on a page where I want to make changes to NavMenu I inject there the NavMenuState as like in NavMenu component and i can change the items on the OnInitialized method or on any other method
protected override void OnInitialized()
{
string[] vs1 = new string[2];
vs1[0] = "New Item";
vs1[1] = "editarentidade";
NavState.AddMenuItem(vs1);
}
public void SetAllNewMenuButtonClick()
{
List<string[]> vs = new();
string[] vs1 = new string[2];
vs1[0] = "Fim";
vs1[1] = "";
vs.Add(vs1);
vs1 = new string[2];
vs1[0] = "Contadeiro";
vs1[1] = "counter";
vs.Add(vs1);
vs1 = new string[2];
vs1[0] = "Meteorologia";
vs1[1] = "fetchdata";
vs.Add(vs1);
vs1 = new string[2];
vs1[0] = "users";
vs1[1] = "genericform/utilizador";
vs.Add(vs1);
NavState.SetNewMenu(vs);
}