如何在Blazor中实现带切换按钮的侧边栏菜单

1. 依赖准备 #

确保你的Blazor项目中已引入Bootstrap 5样式和Font Awesome图标库（用于菜单图标），可通过项目的_Layout.cshtml（Server项目）或index.html（WASM项目）添加资源链接：

<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Bootstrap 5 JS（可选，用于Bootstrap原生交互组件） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

2. 侧边栏组件代码（Sidebar.razor） #

创建可复用的侧边栏组件，通过Blazor布尔绑定控制展开/折叠状态：

<div class="d-flex">
    <!-- 侧边栏容器 -->
    <div class="@SidebarContainerClass" style="min-height: 100vh;">
        <div class="p-3">
            <!-- 切换按钮 -->
            <button class="btn btn-link text-white mb-4" @onclick="ToggleSidebar">
                <i class="@ToggleIconClass"></i>
            </button>

            <!-- 菜单列表 -->
            <ul class="nav flex-column">
                <li class="nav-item mb-3">
                    <a class="nav-link text-white" href="#">
                        <i class="fa-solid fa-house me-3"></i>
                        <span class="@MenuTextClass">首页</span>
                    </a>
                </li>
                <li class="nav-item mb-3">
                    <a class="nav-link text-white" href="#">
                        <i class="fa-solid fa-user me-3"></i>
                        <span class="@MenuTextClass">用户管理</span>
                    </a>
                </li>
                <li class="nav-item mb-3">
                    <a class="nav-link text-white" href="#">
                        <i class="fa-solid fa-cog me-3"></i>
                        <span class="@MenuTextClass">设置</span>
                    </a>
                </li>
                <li class="nav-item mb-3">
                    <a class="nav-link text-white" href="#">
                        <i class="fa-solid fa-question-circle me-3"></i>
                        <span class="@MenuTextClass">帮助</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 主内容区域 -->
    <div class="flex-grow-1 p-4">
        <h2>主内容区</h2>
        <p>这里放置页面核心内容</p>
    </div>
</div>

@code {
    private bool _isSidebarCollapsed = false;

    // 根据状态动态生成CSS类
    private string SidebarContainerClass => _isSidebarCollapsed ? "bg-dark text-white w-auto" : "bg-dark text-white w-25";
    private string MenuTextClass => _isSidebarCollapsed ? "d-none" : "";
    private string ToggleIconClass => _isSidebarCollapsed ? "fa-solid fa-chevron-right" : "fa-solid fa-chevron-left";

    // 切换侧边栏状态
    private void ToggleSidebar()
    {
        _isSidebarCollapsed = !_isSidebarCollapsed;
    }
}

3. 核心逻辑说明 #

• 用布尔变量_isSidebarCollapsed跟踪侧边栏状态，点击切换按钮时反转状态
• 通过动态绑定CSS类实现布局变化：
  • 展开状态：侧边栏占页面25%宽度，显示完整菜单文字
  • 折叠状态：侧边栏自动适配图标宽度，隐藏文字仅保留图标
  • 切换按钮图标随状态切换为左箭头/右箭头，提示操作方向
• 主内容区用flex-grow-1占满剩余空间，保持响应式布局

4. 组件使用 #

在目标页面（如Index.razor）中直接引用组件即可：

@page "/"

<Sidebar />

这个示例基于Blazor原生绑定实现，无需额外JS交互，完全适配Bootstrap 5布局规范，满足侧边栏折叠为仅显示图标的需求。

内容的提问来源于stack exchange，提问作者Yana R.