Vuetify: My navigation drawer is positioned over another element (toolbar) - vue.js

Question

I would like to put my navigation drawer under the toolbar.
I'm trying to achieve something like this :
I am trying to do something similar but all attempts are unsuccessful, at the moment I have the following:
My code:
<template>
<nav>
<v-snackbar v-model="snackbar" :timeout="4000" top color="success">
<span>Awesome! You added a new project.</span>
<v-btn text flat #click="snackbar = false">Close</v-btn>
</v-snackbar>
<v-toolbar app clipped-left >
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-app-bar-nav-icon #click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title class="text-uppercase gr ey--text">
<span class="font-weight-light">estudos</span>
<span>vue</span>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-menu offset-y>
<template v-slot:activator="{ on, attrs }">
<v-btn text
color="primary"
dark
v-bind="attrs"
v-on="on"
>
<v-icon left>expand_more</v-icon>
<span>Menu</span>
</v-btn>
</template>
<v-list>
<v-list-item v-for="link in links" :key="link.text" router :to="link.route">
<v-list-item-title>{{link.text}}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<v-btn text color="grey">
<span>Sign Out</span>
<v-icon right>exit_to_app</v-icon>
</v-btn>
</v-toolbar>
<v-navigation-drawer v-model="drawer" app class="indigo white--text">
<v-app-bar-nav-icon #click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-layout column align-center>
<v-flex class="mt-5">
<v-avatar size="90">
<img src="/avatar-64.png">
</v-avatar>
<p class="white-text dubheading mt-1">
Estudos Vue
</p>
</v-flex>
<v-flex class="mt-4 mb-3">
<popup #projectAdded="snackbar=true" />
</v-flex>
</v-layout>
<v-list >
<v-divider></v-divider>
<v-list-item
v-for="link in links"
:key="link.text"
router :to="link.route"
>
<v-list-item-action >
<v-icon class="white--text">{{ link.icon }}</v-icon>
</v-list-item-action>
<v-list-item-content class="white--text">
<v-list-item-title>{{ link.text }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
<v-row>
<v-col
>
<v-img
max-height="76%"
max-width="100%"
src="/imgtest.jpg"
gradient="to top right, rgba(14,12,11,.51), rgba(14,12,11,.71)"
>
<v-img-title class="heading white--text">
Bien saude</v-img-title></v-img>
</v-col>
</v-row>
</nav>
</template>
<script>
import Popup from './Popup'
export default {
components: { Popup },
data() {
return {
drawer:false,
links:[
{icon: 'dashboard', text:'Dashboard', route:'/'},
{icon: 'folder', text:'My Projects', route:'/projects'},
{icon: 'person', text:'Team', route:'/team'},
],
items: [
{ title: 'Click Me' },
{ title: 'Click Me' },
{ title: 'Click Me' },
{ title: 'Click Me 2' },
],
snackbar: true
}
},
}
</script>
I tried adding Block and removing the app, but it didn't solve the problem...
How do I put my drawer under the toolbar?

Answer 1

Add clipped to v-navigation-drawer props like:
<v-navigation-drawer
clipped>
<!-- ... -->
</v-navigation-drawer>

Answer 2

I would suggest following vuetify.js' default markup first.
Then you'll supposed to use clipped property in the <v-navigation-drawer> element like #mamadou-hady-barry already described. (<v-navigation-drawer clipped app>).
Secondly add the 'clipped-left' to the <v-app-bar> element resulting in: <v-app-bar clipped-left app>.
You are currently using <v-toolbar> which does not have a clipped-left property according to their "API".