I am facing a scenario where I have one fixed navigation drawer with icons and another dynamic navigation drawer that should open and close adjacent to the fixed one without overlapping. The current implementation is causing the dynamic drawer to overlap the entire fixed drawer. Here is the link for reference.
new Vue({
el: '#app',
data() {
return {
actions: [{
icon: 'android'
},
{
icon: 'dashboard'
},
{
icon: 'question_answer'
},
],
drawer: false
}
}
})<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="72040717061b140b32435c475c4346">[email protected]</a>/dist/vuetify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9aecefffeef3fce3daabb4afb4abae">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet" />
<div id="app">
<v-app id="inspire">
<v-navigation-drawer fixed width="70">
<v-list>
<v-list-tile v-for="action in actions" :key="action">
<v-icon>{{action.icon}}</v-icon>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-navigation-drawer temporary app v-model="drawer">
</v-navigation-drawer>
<v-toolbar fixed app class="ml-5 pl-3">
<v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
<v-toolbar-title>Topics</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>more_vert</v-icon>
</v-btn>
</v-toolbar>
</v-app>
</div>The goal is to have the additional navigation drawer open alongside the fixed one, rather than overlapping it entirely. Note: Vuetify version 1.5 is being used.