blazor 折叠按钮 功能

blazor 折叠按钮 功能

<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
                                                                       <!-- 👇👇👇 -->
        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</div>
                                      <!-- 👇👇👇 -->
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
</div>

@code {
    private bool collapseNavMenu = true;  // 小写变量 
    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null; // 一般来说绑定的变量都是大写,直接绑定也行
    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

.collapse {
    /* Never collapse the sidebar for wide screens */
    display: block;
}