v-navigation-drawer takes up the entire row - vue.js

Question

my v-navigation-drawer takes up the entire row, so the content goes underneath the drawer. I was trying to research online but didn't find anything about it. I am very new to Vuetify. Please help. If you look at the screenshot the Dashboard must be next to drawer but it goes underneath. I have two components Navbar and Drawer. I render them inside of my App.vue. I attached the code below.
App.vue
<template>
<v-app>
<navbar/>
<drawer/>
<v-content>
<h1>Dashboard</h1>
</v-content>
</v-app>
</template>
<script>
import Drawer from './components/Drawer';
import Navbar from './components/Navbar';
export default {
name: 'App',
components: {
Drawer,
Navbar,
},
data: () => ({
}),
method:() => ({})
};
</script>
<style>
</style>
Navbar.vue
<template>
<div>
<nav>
<v-toolbar class="cyan lighten-1" dark prominent height="65">
<v-toolbar-title class="text-uppercase gray--text">
<span class="font-weight-light">Stock</span>
<span>Dashboard</span>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn text color="black">
<span>Log Out</span>
<v-icon right>exit_to_app</v-icon>
</v-btn>
</v-toolbar>
</nav>
</div>
</template>
<script>
export default {
data(){
return {
}
}
}
</script>
<style>
</style>
Drawer.vue
<template>
<v-navigation-drawer id="app-drawer" class="cyan lighten-1" dark permanent>
<v-list>
<v-list-tile avatar>
<v-list-tile-avatar color="white">
<v-img :src="require('../assets/bull.svg')" height="70" contain class="cyan darken-5"></v-img>
</v-list-tile-avatar>
</v-list-tile>
<v-list-item
v-for="item in items"
:key="item.title"
link
>
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
<template v-slot:append>
<div class="pa-2">
<v-btn block>Logout</v-btn>
</div>
</template>
</v-navigation-drawer>
</template>
<script>
export default {
data () {
return {
items: [
{ title: 'Dashboard', icon: 'dashboard' },
{ title: 'Account', icon: 'account_box' },
{ title: 'Admin', icon: 'gavel' },
],
}
},
}
</script>
<style>
</style>

Answer 1

Use "app" in v-navigation-drawer like so :
<v-navigation-drawer id="app-drawer" class="cyan lighten-1" dark permanent app>
Further take a look at https://vuetifyjs.com/en/components/navigation-drawers API and use v-app-bar instead of v-toolbar for the main toolbar of your page.