如何创建嵌套的 vuetify 导航抽屉？

Question

I have a case here where i have one navigation drawer which i want to keep fixed with icons in it and i want another navigation drawer which can be opened and closed adjacent to the fixed drawer without overlapping it. I have got the nav drawer to work but it actually overlaps the whole drawer. This is a link to the pen .

 new Vue({ el: '#app', data() { return { actions: [{ icon: 'android' }, { icon: 'dashboard' }, { icon: 'question_answer' }, ], drawer: false } } })

 <script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/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/vuetify@1.5.14/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>

Again, the navigation drawer should open right next to the fixed drawer and not overlap it.PS i am using vuetify 1.5

Answer 1

There is no way to do it just with props. You could add some custom CSS for when the 2nd drawer is open...

.v-navigation-drawer--open.d2 {
    left: 70px;
    box-shadow: 0 0 0 0;
}

Codeply