窗口缩小时SideMenu导航消失，如何解决该布局问题？

问题根源 #

1. Vuetify的v-navigation-drawer默认在屏幕宽度小于960px（移动端断点）时自动收起隐藏，这是缩小窗口后导航消失的核心原因。
2. 移除v-container后，v-main失去了默认的响应式宽度和内边距控制，虽然解决了抽屉隐藏问题，但导致布局失控。

具体修改步骤 #

1. 强制SideMenu始终显示

修改SideMenu.vue中的v-navigation-drawer组件，添加permanent属性，让抽屉不受屏幕尺寸影响，始终保持展开状态：

<v-navigation-drawer
  border="none"
  class="position-sticky"
  :style="{ maxHeight, minWidth, marginTop }"
  style="height: fit-content"
  width="250"
  permanent <!-- 新增该属性 -->
>

如果需要后续灵活调整断点，也可以替换为mobile-breakpoint="0"，效果一致。

2. 修复布局结构（保留v-container）

修改default.vue的flex布局结构，确保SideMenu不被挤压，同时v-container正常工作：

<div class="d-flex flex-0-1-100">
  <!-- 给SideMenu套一层容器，设置flex-shrink-0防止被压缩 -->
  <div class="flex-shrink-0">
    <SideMenu />
  </div>
  <!-- 给v-main添加flex-grow-1，让它占据剩余空间 -->
  <v-main class="pl-0 flex-grow-1">
    <v-container>
      <slot />
      <NavigationLink />
    </v-container>
  </v-main>
  <TableofContents />
</div>

原理说明 #

• permanent：强制导航抽屉始终处于展开可见状态，覆盖默认的移动端自动收起逻辑。
• flex-shrink-0：固定SideMenu的宽度，避免在窗口缩小时被flex容器挤压缩小甚至隐藏。
• flex-grow-1：让v-main占据剩余可用空间，保证内容区域正常布局，同时v-container的响应式内边距和宽度控制依然生效。

验证效果 #

修改完成后调整浏览器窗口大小：

• SideMenu会始终保持显示，不会随窗口缩小消失。
• v-container内的内容布局正常，无溢出或错位问题。

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