Vuetify - Navigation Drawer space gap

Question

When the navigation drawer is closed or open, it creates a big gap on the page based on it's height. How can that be avoided?

In the second image it's clearly visible between the navbar and Create Post component that the drawer takes up room

<template>
  <v-app>
    <v-navigation-drawer clipped v-model="sideNav">
      <v-list>
        <v-list-item
          v-for="item in items"
          :key="item.title"
          @click="onClickMenuItem(item.title)"
        >
          <v-list-item-icon>
            <v-icon v-text="item.icon"></v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title v-text="item.title"></v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    <v-app-bar
      dark
      fixed
      class="default-layout__navbar"
      extended
      extension-height="3"
    >
      <v-app-bar-nav-icon
        @click.native.stop="sideNav = !sideNav"
        class="hidden-sm-and-up"
      >
      </v-app-bar-nav-icon>
      <v-toolbar-title>
        <router-link to="/" tag="span" style="cursor: pointer">
          Blog
        </router-link>
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-toolbar-items class="hidden-xs-only">
        <v-btn
          v-for="item in items"
          :key="item.title"
          @click="onClickMenuItem(item.title)"
        >
          <v-icon left dark>{{ item.icon }}</v-icon>
          {{ item.title }}
        </v-btn>
      </v-toolbar-items>

      <v-spacer></v-spacer>
      <!-- <span class="nav-user" v-if="loggedInUser.token">{{
        loggedInUser.username
      }}</span> -->
    </v-app-bar>

    <v-content class="default-layout__main-content">
      <transition name="fade" mode="out-in">
        <router-view />
      </transition>
    </v-content>
  </v-app>
</template>

Zim Zim · Accepted Answer · 2020-03-07T13:23:42

If I understand the question, you're looking for a layout like this. Notice how the app prop is used in both the v-navigation-drawer and app-bar...

   <v-app>
        <v-navigation-drawer v-model="sideNav" app>
            <v-list>
                <v-list-item v-for="item in items" :key="item.title" @click="onClickMenuItem(item.title)">
                    <v-list-item-icon>
                        <v-icon v-text="item.icon"></v-icon>
                    </v-list-item-icon>
                    <v-list-item-content>
                        <v-list-item-title v-text="item.title"></v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
            </v-list>
        </v-navigation-drawer>
        <v-app-bar dark fixed app class="default-layout__navbar" extended extension-height="3">
            <v-app-bar-nav-icon @click.native.stop="sideNav = !sideNav" class="hidden-sm-and-up">
            </v-app-bar-nav-icon>
            <v-toolbar-title>
                <router-link to="/" tag="span" style="cursor: pointer"> Blog </router-link>
            </v-toolbar-title>
            <v-spacer></v-spacer>
            <v-toolbar-items class="hidden-xs-only">
                <v-btn v-for="item in items" :key="item.title" @click="onClickMenuItem(item.title)">
                    <v-icon left dark>{{ item.icon }}</v-icon>
                    {{ item.title }}
                </v-btn>
            </v-toolbar-items>
            <v-spacer></v-spacer>
            <span class="nav-user"> username </span>
        </v-app-bar>
        <v-content class="default-layout__main-content">
            <transition name="fade" mode="out-in">
                <router-view />
            </transition>
        </v-content>
  </v-app>

Demo: https://codeply.com/p/KNNSlNEmzM

Vuetify - Navigation Drawer space gap

1 Answers