html - how to hide sidebar by using Animate and Button in blazorise?

Question

I want to create a Collapsing sidebar in blazorise which shows by Animate but I can not hide it by click on a button.

in MainLayout.razor :

@inherits LayoutComponentBase

<div class="page">
<Animate Animation="Animations.SlideLeft" Duration="TimeSpan.FromSeconds(1)" Delay="TimeSpan.FromSeconds(0)">
    <div class="sidebar">
        <NavMenu />
    </div>
</Animate>

<div class="main">
    <div class="content px-4">
        @Body
        <FetchData />
    </div>
</div>

in NavMenu.razor :

<div class="top-row pl-4 navbar navbar-dark fixed-bottom">
    <button class="sidebar-minimizer">
        <Icon Name="IconName.AngleRight"></Icon>
    </button>
</div>

in index.html :

<style>
    .sidebar-minimizer { 
     background-color: rgba(0, 0, 0, 0.2);
    }
</style>

could you please tell me what is wrong with this code? Is there another way to make a Collapsing sidebar?

question from:https://stackoverflow.com/questions/65918987/how-to-hide-sidebar-by-using-animate-and-button-in-blazorise

Answer 1

Waitting for answers