如何仅隐藏Vue-Bootstrap b-sidebar部分宽度，实现GitLab式收起仅显示菜单图标

核心思路是放弃b-sidebar自带的全量显隐toggle逻辑，手动控制侧边栏的常驻状态，通过动态修改宽度、隐藏文字内容实现仅保留图标列的收起效果，刚好满足“隐藏80%宽度、不全量移出视口”的需求。

第一步：改造基础模板逻辑 #

• 移除原有按钮上的v-b-toggle.sidebar-1绑定，这个指令会触发b-sidebar自带的全量移出视口的逻辑，和我们要的半收起效果冲突
• 在组件的data中定义状态变量：isSidebarCollapsed（布尔值，默认false代表侧边栏全展开），按钮点击时直接翻转这个状态值即可
• 强制让b-sidebar始终处于可见状态：把:visible属性直接绑定为true，不让组件本身触发隐藏逻辑
• 利用b-sidebar原生支持的width属性，动态绑定不同状态下的侧边栏宽度

改造后的基础模板代码参考：

<b-button @click="isSidebarCollapsed = !isSidebarCollapsed" class="toggle-sidebar">
  <span>{{ isSidebarCollapsed ? '展开侧边栏' : '收起侧边栏' }}</span>
</b-button>

<b-sidebar
  id="custom-sidebar"
  :visible="true"
  :width="isSidebarCollapsed ? '3.5rem' : '14rem'"
  shadow
  class="custom-sidebar"
>
  <!-- 原有侧边栏内容 -->
  <div 
    class="sidebar-menu-item" 
    v-for="item in menuList" 
    :key="item.id"
  >
    <b-icon :icon="item.icon"></b-icon>
    <span class="menu-text" v-show="!isSidebarCollapsed">{{ item.name }}</span>
  </div>
</b-sidebar>

说明：上述宽度设置中，全展开状态为14rem，收起状态为3.5rem，刚好隐藏了75%的宽度，接近80%的隐宽需求，可根据实际的菜单样式微调数值。

第二步：添加过渡动画，优化交互丝滑度 #

• 给自定义侧边栏类补充样式，实现宽度变化的平滑过渡，同时覆盖b-sidebar默认的位置位移动画：

.custom-sidebar {
  /* 宽度变化的过渡动画，时长可自行调整 */
  transition: width 0.25s ease;
  /* 关闭默认的滑入滑出位移效果，改为纯宽度变化 */
  transform: none !important;
}

• 关闭原有b-sidebar的backdrop属性：这种常驻式的半隐侧边栏不需要遮罩层，和GitLab的交互逻辑一致，收起时不会遮挡后方页面内容
• 联动调整主内容区的左内边距：当侧边栏收起时，主内容区的左padding从14rem同步调整为3.5rem，搭配同样的0.25s过渡动画，实现两侧同步移动的视觉效果，避免内容区位置跳变

第三步：细节对齐GitLab交互效果 #

• 收起状态下调整菜单项布局：让图标在窄宽度的侧边栏内居中显示，移除多余的左右内边距

.sidebar-menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
}
/* 收起状态下的菜单项样式 */
.custom-sidebar.is-collapsed .sidebar-menu-item {
  justify-content: center;
  padding: 0.5rem;
}

• 可直接借助Vue-Bootstrap自带的b-tooltip组件，给每个收起状态下的菜单图标添加悬浮提示，不用额外开发交互
• 侧边栏内的title、表单类非导航内容，可通过v-show="!isSidebarCollapsed"在收起状态下隐藏，进一步压缩多余宽度

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