C#•7mo ago

Sidebar smooth animation in Blazor Wasm

There isn't to much to detail I'm using the default Bootstrap Template from Blazor Wasm project I just want to know how can I add some kind of smooth animation when closing and opening the sidebar. Here's a small piece of code

<div class="sidebar-nav scroll-sidebar @NavMenuCssClass" @onclick=ToggleNavMenu>
    <Sidebar />
</div>

@* Sidebar Interaction *@
@code {
    private bool collapseNavMenu = true;

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

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

<div class="sidebar-nav scroll-sidebar @NavMenuCssClass" @onclick=ToggleNavMenu>
    <Sidebar />
</div>

@* Sidebar Interaction *@
@code {
    private bool collapseNavMenu = true;

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

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

The trick here is adding and removing the *collapse" class from the navbar div. Thanks!

2 Replies

Angius•7mo ago

CSS One class has a negative margin, the other has no margin, add a transition property, done Alternatively animation with keyframes Not much to do with Blazor, besides using it to swap the classes around

leo•7mo ago

ight thanks alot man

Gaming

Programming

Sidebar smooth animation in Blazor Wasm