[FIXED] How to change side menu content dynamicaly?

[KroMignon]

Hello all,

I am new to Blazor and have started a project using Blazorise.
Thanks for the great job done, I hope I can help when I am more comfortable with Blazor!
The start was not so easy, but now I have a running application!

How I can change dynamically sidebar menu content?
I would like to hide or remove items in the sidebar according to current application state.
I could not find anything in documentation or sample application, how should I do this?

Thanks for any help

[stsrki]

Hi @KroMignon

Dynamic binding can be done with a few foreach loops iterating over your data sources. This feature is already planned for the next release of our Bar component but until it's finished you need to it yourself.

For reference look at our older Sidebar component and adjust code for the Bar component, The source is here https://github.com/stsrki/Blazorise/blob/master/Source/Extensions/Blazorise.Sidebar/Sidebar.razor

[KroMignon]

@stsrki Thanks a lot for this very quick reply.
I am impressed!

In the meantime, I found a half working solution.
Perhaps you could help me, to understand what I am doing wrong.
First, I apologize, I am not using SideBar but Bar component.

I have a Singleton class which holds some global states, and in my component which build Bar I have done something like
@if (AppData.ShowFullMenu) { <BarItem> ... </BarItem> }

But the Bar component is only refresh when I click on BarToggler.
Any idea how to fix this?

[stsrki]

You probably need to trigger rerender when AppData.ShowFullMenu changes. So just call InvokeAsync(()=>StateHasChanged()) somewhere in your page to trigger it.

[KroMignon]

@stsrki thanks again!

But this was not my error, I had to use something called State Container (https://chrissainty.com/3-ways-to-communicate-between-components-in-blazor/)

After adding event to my Singelton class and attached it to my component with:
@code {

protected override void OnInitialized()
{
    AppData.OnChange += StateHasChanged;
}

public void Dispose()
{
    AppData.OnChange -= StateHasChanged;
}

}

all works as expected, sometimes thing are very simple 👍

[paulosdfigueiredo]

If you invoke StateHasChanged in a component, only that specific component and all it's children will be refreshed.

All the other components don't know that they have to be refreshed, so you have to specifically incoke StateHasChange for them. As you already found, a possible solution is a state container. Components subscribe to NotifyChange, and when state is changed, all subscribers are notified and StateHasChanged is invoked for all of them.