Top navigation is hidden

Question

I don't want the top of the navigation to be hidden when I scroll to the bottom of the page and see the footer.

Below is the state before scrolling.

Below is a screenshot when scrolling down to the page.

Here is the code

<template>
  <div id="app">
    <v-app>
      <v-app-bar>header</v-app-bar>
      <div class="d-flex flex-0-1-100">
        <v-navigation-drawer
          border="r"
          permanent
          fixed
          class="pa-1 position-sticky"
          style="max-height: calc(100vh - 64px)"
        >
          <div style="border: 2px solid pink; height: 100%">
            nav bar
            <v-text-field
              v-model.number="contentHeight"
              min="0"
              step="400"
              type="number"
              label="content height (px)"
            />
          </div>
        </v-navigation-drawer>

        <v-main class="bg-grey pl-0">
          Main content
          <div
            :style="{height: contentHeight + 'px'}"
            class="bg-brown-darken-2"
          >
            content ({{contentHeight}}px)
          </div>
        </v-main>
      </div>
      <v-footer border="t">footer</v-footer>
    </v-app>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  const contentHeight = ref(1000)
</script>

I would appreciate it if you could check the playground

I have tried the following

When I remove the "position-sticky" class from the "v-navigation-drawer," the navigation area at the top does not move upwards even when the footer is visible. However, in doing so, the navigation extends horizontally beyond the footer's boundary, as shown in the image below:

I may not be able to explain it well in English, but as a layout https://pro-bravia.sony.net/en/guides/ I want it to be the same as if I scrolled down to this site

In the application I'm currently developing, if I use the following v-navigation-drawer, the height of the navigation is halved.

<client-only>
    <v-navigation-drawer
      permanent
      class="position-sticky"
      :style="{ maxHeight, minWidth }"
      style="
        height: fit-content;
        margin-top: 64px;
      "
      width="250"
    >
      <v-row justify="center">
        <v-expansion-panels :modelValue="panel" :multiple="true">
          <v-expansion-panel
            v-for="(item, i) in matchedNavObject.children"
            :key="i"
          >
            <v-expansion-panel-title>{{ item.title }}</v-expansion-panel-title>

            <v-expansion-panel-text
              v-for="(navItem, j) in item.children"
              :key="j"
            >
              <nuxt-link
                :to="`${baseUrl}${navItem._path}`"
                class="text-decoration-none"
                :class="{
                  active: `${navItem._path}/` === route.path,
                }"
                >{{ navItem.title }}</nuxt-link
              >
            </v-expansion-panel-text>
          </v-expansion-panel>
        </v-expansion-panels>
      </v-row>
    </v-navigation-drawer>
  </client-only>

Answer 1

You can do this by simply reducing the height of the navbar. The Vuetify default is height: calc(100% - 64px);, but you can override it to fit content:

<v-navigation-drawer
  class="position-sticky"
  style="max-height: calc(100vh - 64px); height: fit-content;"
>

Note that this will still scroll when the navbar content takes up more height than window height minus header and footer height. You could avoid that by reserving space for the footer (i.e. set max-height: calc(100vh - 128px) on the nav drawer), but then that space won't be used even if the footer is not visible.

Finally, if nav exceeds the available height and main content takes up less space than that, the navbar will be cut off at the top, so I would add a margin-top: 64px to the navigation drawer, just to be safe.

Here is a playground

Here is another playground with expansion panels in the nav bar

Answer 2

how about fix code

  <v-app-bar>header</v-app-bar>
  <div class="d-flex flex-0-1-100">
    <v-navigation-drawer
      border="r"
      permanent
      app
      fixed
      class="pa-1"
      style="top: 64px; bottom: 50px"
    >
      <div style="border: 2px solid pink; height: 100%">
        nav bar
        <v-text-field
          v-model.number="contentHeight"
          min="0"
          step="400"
          type="number"
          label="content height (px)"
        />
      </div>
    </v-navigation-drawer>

    <v-main class="bg-grey ml-0" style="min-height: calc(100vh - 64px)">
      <v-container fluid class="pa-0">
        Main content
        <div
          :style="{height: contentHeight + 'px'}"
          class="bg-brown-darken-2 mb-8"
        >
          content ({{contentHeight}}px)
        </div>
      </v-container>
    </v-main>
  </div>

  <v-footer fixed app border="t" style="width: 100%">footer</v-footer>

Answer 3

I've used the wireframe template from the Vuetify documentation and tried to keep it as simple as it can be. Hope this helps:

Playground

<template>
  <v-app id="inspire">
    <v-app-bar>
      <v-app-bar-nav-icon @click="drawer = !drawer" />
    </v-app-bar>
    <v-navigation-drawer v-model="drawer" clipped class="pa-1" permanent>
      <div style="border: 1px solid pink; height: 100%">Navigation</div>
    </v-navigation-drawer>
    <v-main>
      <v-card rounded="0" min-height="100vh" class="bg-brown-darken-2 pa-1">
        Main Content
      </v-card>
      <v-footer style="border: 1px solid pink">Footer Content</v-footer>
    </v-main>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'

  const drawer = ref(true)
</script>

If you want to keep the navigation temporary, add temporary attribute to the v-navigation-drawer component.