导航涵盖主要内容

Question

当我缩小窗口时，右侧导航菜单覆盖了主要内容

这是正常状态下的图像

窗口缩小时的图像如下

这是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>

如果您能告诉我是否有办法改进这一点，我将不胜感激

TableofContents.vue删除minWidth后的图片如下

Answer 1

问题似乎出在导航抽屉上的

minWidth

。

看看 playground，看看没有它时它的表现如何。