Избегать перекрытия кнопок при расширении панели навигации в vuetify?

Question

Требовалась некоторая помощь для выяснения навигационного ящика в vuetify. Кодовая ручка для следующего ниже. Таким образом, внутри панели навигации есть панель инструментов, и когда я нажимаю на кнопку, она не должна скрываться внизу, когда панель навигации расширяется.

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>

И мой файл сценария в этом: -

new Vue ({
  el : '#app',
  data () {
return {
  drawer: false,
  links:[
            {text:"Dashboard", route:"/"},
            {text:"My Projects", route:"/projects"},
            {text:"Team", route:"/team"}
        ],
    }
   }
 })

Answer 1

Используйте z-index.Создание z-индекса для этой кнопки 5, кажется, работает.

<v-btn @click="drawer = !drawer" style="z-index: 5">Click Me</v-btn>

Если вы не хотите использовать z-index.Другим способом является манипулирование панелью инструментов.

<v-toolbar fixed app :clipped-left="clipped" flat>
  <v-btn @click.stop="drawer = !drawer">Click Me</v-btn>
</v-toolbar> 

Другим способом является ручное добавление margin-left на кнопку в зависимости от состояния ящика.Ширина ящика по умолчанию составляет 300px.Вот образец 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>