右侧导航菜单窗口缩小时遮挡主内容的优化方案咨询

当缩小浏览器窗口时，右侧的TableofContents导航菜单会遮挡主内容区域，相关状态截图如下：

• 正常状态：
• 窗口缩小后（遮挡状态）：
• 删除TableofContents.vue中minWidth后的状态：

相关代码 #

default.vue #

<template>
  <v-app>
    <Header />
    <div class="d-flex flex-0-1-100">
      <SideMenu />
      <v-main class="pl-0 pr-0">
        <v-container>
          <slot />
          <NavigationLink />
        </v-container>
      </v-main>
      <TableofContents />
    </div>
    <Footer />
  </v-app>
</template>
<style lang="scss">
.test {
}
.v-main {
  border-left: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
}
video {
  width: 100%;
}
</style>

TableofContents.vue #

<template>
  <v-navigation-drawer
    permanent
    location="right"
    border="none"
    class="position-sticky"
    :style="{ maxHeight, minWidth }"
    style="height: fit-content"
    width="250"
  >
    <v-list>
      <v-list-item>
        <v-list-item-title class="ml-6">Table of Contents</v-list-item-title>
      </v-list-item>
      <v-list-item>
        <div class="ml-6 green">
          <nuxt-link
            v-for="(id, index) in filteredIds"
            :key="id"
            :to="`#${id}`"
            class="toc-contents text-decoration-none d-block"
            :class="{ visible: isVisible[index] }"
            >{{ id }}</nuxt-link
          >
        </div>
      </v-list-item>
    </v-list>
  </v-navigation-drawer>
</template>

<style scoped lang="scss">
.toc-contents {
  color: $color-gray-100;
}
.visible {
  color: $color-toc-text-visible;
}
</style>

优化解决方法 #

方案1：移除固定最小宽度+响应式布局适配 #

从截图可知，删除minWidth后菜单不会强制占用宽度，但需调整布局避免内容挤压：

1. 移除TableofContents.vue中minWidth的绑定：

<v-navigation-drawer
  permanent
  location="right"
  border="none"
  class="position-sticky"
  :style="{ maxHeight }" <!-- 删除minWidth -->
  style="height: fit-content"
  :width="window.innerWidth < 768 ? '200' : '250'" <!-- 增加响应式宽度 -->
>

2. 修改default.vue的父容器，添加换行和主内容占满属性：

<div class="d-flex flex-0-1-100 flex-wrap"> <!-- 添加flex-wrap实现小屏换行 -->
  <SideMenu />
  <v-main class="pl-0 pr-0 flex-grow-1"> <!-- 添加flex-grow-1让主内容占满剩余空间 -->
    ...
  </v-main>
  <TableofContents />
</div>

方案2：小屏自动隐藏目录，改用按钮触发 #

利用Vuetify的响应式特性，大屏保持永久显示，小屏转为抽屉式：

<!-- TableofContents.vue修改内容 -->
<template>
  <div>
    <!-- 小屏显示触发按钮 -->
    <v-btn
      v-show="window.innerWidth < 768"
      fab
      fixed
      bottom
      right
      color="primary"
      @click="drawer = !drawer"
    >
      <v-icon>mdi-table-of-contents</v-icon>
    </v-btn>

    <v-navigation-drawer
      :permanent="window.innerWidth >= 768"
      :temporary="window.innerWidth < 768"
      location="right"
      border="none"
      v-model="drawer"
      class="position-sticky"
      :style="{ maxHeight }"
      style="height: fit-content"
      width="250"
    >
      <!-- 原有菜单内容 -->
    </v-navigation-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawer: false
    }
  }
}
</script>

方案3：调整主内容右内边距适配菜单宽度 #

如果需要菜单始终显示，可给主内容添加响应式内边距：

/* default.vue的style中修改 */
.v-main {
  border-left: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
  @media (max-width: 768px) {
    padding-right: 250px; /* 数值等于菜单宽度 */
  }
}

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