如何通过按钮控制Blazor标准模板侧边菜单的显示与隐藏

以下操作基于Blazor Server/WASM官方默认模板实现，全程只需修改Shared/MainLayout.razor文件即可：

• 第一步：添加状态控制字段与切换方法
  打开Shared/MainLayout.razor，在文件末尾添加如下代码：

@code {
    // 记录侧边栏是否为隐藏状态
    private bool isSidebarHidden = false;

    // 切换侧边栏显隐的方法
    private void ToggleSidebar()
    {
        isSidebarHidden = !isSidebarHidden;
    }
}

• 第二步：绑定侧边栏显隐状态
  找到文件中定义侧边栏的代码行<div class="sidebar">，修改为类绑定形式，根据状态控制显示：

<!-- 直接使用Bootstrap内置的d-none类控制隐藏，无需额外写css -->
<div class="sidebar @(isSidebarHidden ? "d-none" : "")">

如果需要滑入滑出的动画效果，可以自定义css类替换d-none：

/* 可以写在MainLayout.razor.css文件里 */
.sidebar {
    transition: transform 0.3s ease-in-out;
}
.sidebar-hidden {
    transform: translateX(-100%);
}

对应修改侧边栏的类绑定为：

<div class="sidebar @(isSidebarHidden ? "sidebar-hidden" : "")">

• 第三步：添加触发按钮
  找到顶部导航栏的代码块<div class="top-row px-4">，在内部添加触发按钮：

<button class="btn btn-outline-light me-3" @onclick="ToggleSidebar">☰ 菜单</button>

完成后运行项目，点击顶部的菜单按钮即可切换侧边栏的显示与隐藏，逻辑完全走Blazor的交互模式，无需引入额外JS代码。

内容的提问来源于stack exchange，提问作者Tom Cat