Vuetify - Navigation Drawer space gap - vue.js

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>

Answer 1

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