Avoid overlapping of a button while expanding navigation drawer in vuetify? - vuejs2

Question

Needed some help with figuring out the navigation drawer in vuetify. The codepen for the following is below. So basically there is a toolbar inside the navigation drawer and when i click on the button it should not hide underneath when the navigation drawer expands.
https://codepen.io/anon/pen/qwbNZv
<div id="app">
<v-btn #click="drawer = !drawer">Click Me</v-btn>
<v-navigation-drawer app v-model="drawer" class="primary">
<v-toolbar app flat>
<v-toolbar-side-icon #click="drawer=!drawer"></v-toolbar-side-icon>
<v-toolbar-title class="text-uppercase grey--text">
<span class="font-weight-light">Todo</span>
<span> Something</span>
</v-toolbar-title>
</v-toolbar>
<v-layout column align-center>
<v-flex class="mt-3">
<v-avatar size="150" class="center">
<img src="https://randomuser.me/api/portraits/men/1.jpg">
</v-avatar>
<p class="white--text subheading mt-2 text-xs-center">Double A</p>
</v-flex>
</v-layout>
<v-list>
<v-list-tile v-for="link in links" :key="link.text" router
:to="link.route">
<v-list-tile-content>
<v-list-tile-title class="white--text">{{link.text}}</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
</div>
And my script file in this:-
new Vue ({
el : '#app',
data () {
return {
drawer: false,
links:[
{text:"Dashboard", route:"/"},
{text:"My Projects", route:"/projects"},
{text:"Team", route:"/team"}
],
}
}
})

Answer 1

Use z-index. Making the z-index of that button 5 seems to work.
<v-btn #click="drawer = !drawer" style="z-index: 5">Click Me</v-btn>
If you dont want to use z-index. One other way is to manipulate the toolbar.
<v-toolbar fixed app :clipped-left="clipped" flat>
<v-btn #click.stop="drawer = !drawer">Click Me</v-btn>
</v-toolbar>
One other way is to manually add margin-left on the button dependent on drawer state. Drawer's default width is 300px. Here is sample https://codepen.io/Jubels/pen/rbeBJy
<v-flex class="pl-2">
<v-btn #click.stop="drawer = !drawer" :style="(drawer) ? 'margin-left: 300px' : 'margin-left: 0'">Click Me</v-btn>
</v-flex>