CODEWITHSUNDEEP
vue.jsvuejs2
Leonardo da Rosa Silveira João
Leonardo da Rosa Silveira João

Reputation: 33

How use two v-navigation-drawer?

I would like to use two v-navigation-drawer in my application. I want to put the second v-navigation-drawer on v-content of the v-app.

This image, I put the sample image inside v-content.

Because, I created the routes. And when clicked in item of the second v-navigation-drawer, will open the other component next to v-navigation-drawer.

Ex:

  1. blabla/settings/profile
  2. blabla/settings/conf

Link: https://vuetifyjs.com/en/components/application/

enter image description here

Upvotes: 0

Views: 927

Answers (1)

SC Kim
SC Kim

Reputation: 600

So the routes are kind of nested according to your examples: a Settings in 1st Drawer and Profile & Conf in 2nd/child drawer. Let's call those Nested Routes.

1) If you wish to have those drawers as you wished, you need to create:

1 MainDrawer.vue component that wraps 1 ChildDrawer.vue child component which contains/wraps the <router-view> (if you're using vue-router). You will have to connect the links by append <router-link to="/settings/profile"> and other routes under Settings. You will have to toggle the drawer "open" state of 2nd child drawer if reached /profile or /config routes.

2) Instead of that approach, Vuetify has Nested List(link here) that solves your child routes with v-list-group component up to 2 levels in-depth (which is sufficient for your case as well).

Upvotes: 1

Related Questions