Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

MudBlazor - close sidebar after Navigation

Problem: the sidebar doesn't close after I navigate to another page.

What I've tried: adding a OnClick="" event to the <MudNavLink> to close the sidebar, however if I do that it will override the href (meaning it closes the sidebar, but does not navigate to another page).

        <MudLayout>
            <MudAppBar Elevation="3">
                <MudIconButton Style=" margin: 0; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); " Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="ToggleSidebar" />
             </MudAppBar>
            <MudDrawer Open="_sidebarOpen" Elevation="1">
                <MudNavMenu>
                    <MudNavLink Href="/index" Match="NavLinkMatch.All" Icon="@Icons.Filled.Home">Home</MudNavLink>
                    ...
                </MudNavMenu>
            </MudDrawer>
        </MudLayout>
like image 617
Henrique Pombo Avatar asked Sep 07 '25 04:09

Henrique Pombo


1 Answers

Added Variant="DrawerVariant.Temporary":

...
<MudDrawer @bind-Open="_sidebarOpen" Elevation="1" Variant="DrawerVariant.Temporary">
...
like image 132
Henrique Pombo Avatar answered Sep 11 '25 00:09

Henrique Pombo