如何在Blazor Server中实现类Gmail的悬浮展开侧边导航

1. 调整侧边栏定位逻辑（核心修改） #

要实现悬浮展开不挤压主体，关键是让侧边栏脱离文档流，改用固定定位，这样宽度变化只会覆盖主体而非推动布局。修改NavMenu的CSS：

.nav-menu {
    position: fixed; /* 脱离文档流，不影响主体布局 */
    top: 0;
    left: 0;
    height: 100vh; /* 占满整个视口高度 */
    width: 60px; /* 初始仅显示图标的窄宽度 */
    background-color: #2c3e50;
    transition: width 0.3s ease; /* 平滑展开/收起动画 */
    z-index: 1000; /* 确保侧边栏覆盖在主体上方 */
    overflow: hidden; /* 隐藏超出窄宽度的菜单文字 */
}

.nav-menu:hover {
    width: 220px; /* 悬浮展开后的宽宽度 */
}

2. 适配主体内容边距 #

因为侧边栏固定定位，主体内容需要留出初始窄侧边栏的宽度，避免被遮挡：

.main-content {
    margin-left: 60px; /* 和侧边栏初始宽度一致 */
    padding: 1.5rem;
    min-height: 100vh;
}

3. 优化菜单项布局 #

确保图标和文字在悬浮时能正确显示，给菜单项添加flex布局：

<div class="nav-menu">
    <div class="nav-item">
        <span class="nav-icon">📧</span>
        <span class="nav-text">收件箱</span>
    </div>
    <div class="nav-item">
        <span class="nav-icon">📤</span>
        <span class="nav-text">已发送</span>
    </div>
    <!-- 更多菜单项 -->
</div>

配套菜单项CSS：

.nav-item {
    display: flex;
    align-items: center;
    padding: 1rem 0.6rem;
    cursor: pointer;
    gap: 1.2rem; /* 图标与文字的间距 */
    color: white;
}

.nav-icon {
    font-size: 1.3rem;
    width: 32px; /* 固定图标宽度，避免悬浮时布局抖动 */
    text-align: center;
}

.nav-text {
    white-space: nowrap; /* 强制文字不换行 */
}

4. 调整MainLayout结构 #

确保布局层级清晰，侧边栏和主体内容分离：

<div class="layout-wrapper">
    <NavMenu />
    <main class="main-content">
        @Body
    </main>
</div>

关键逻辑说明 #

• 固定定位让侧边栏脱离正常文档流，宽度变化仅会覆盖主体区域，不会挤压内容
• z-index:1000保证侧边栏展开时在主体内容之上，不会被遮挡
• 过渡动画让展开/收起过程更流畅，贴合Gmail的交互体验
• 主体内容的margin-left与侧边栏初始宽度匹配，避免初始状态下内容被遮挡

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