Vuetify - Navigation Drawer with nested list items

Asked

Viewed 91 times

-1

I’m trying to create a navigation drawer with nested list items like this: Vuetify Navigation Panel

<v-navigation-drawer v-model="drawer" app clipped>
            <v-list dense>
                <template>
                    <div v-for="item in items" :key="item.title">
                        <v-list-group v-if="item.items" v-model="item.active" :prepend-icon="item.action" no-action link>
                            <template v-slot:activator>
                                <v-list-item-content>
                                    <v-list-item-title v-text="item.title"></v-list-item-title>
                                </v-list-item-content>
                            </template>
                            <v-list-item v-for="subItem in item.items" :key="subItem.title" :to="subItem.to">
                                <v-list-item-icon>
                                    <v-icon v-text="subItem.action"></v-icon>
                                </v-list-item-icon>
                                <v-list-item-content>
                                    <v-list-item-title v-text="subItem.title"></v-list-item-title>
                                </v-list-item-content>
                            </v-list-item>
                        </v-list-group>
                        <v-list-item v-else :to="item.to" link>
                            <v-list-item-icon>
                                <v-icon v-text="item.action"></v-icon>
                            </v-list-item-icon>
                            <v-list-item-content>
                                <v-list-item-title v-text="item.title"></v-list-item-title>
                            </v-list-item-content>
                        </v-list-item>
                    </div>
                </template>
            </v-list>
        </v-navigation-drawer>

Script

items: [
                {
                    action: 'fa-chart-line',
                    title: 'Dashboard',
                    to: '/dashboard'
                },
                {
                    action: 'fa-user',
                    title: 'Attractions',
                    items: [
                        {
                            title: 'Home',
                            action: 'fa-barcode',
                            to: '/home'
                        }
                    ]
                },
                {...}
            ]
        }),

However, when I click on a non-nested list item, the other items are still in active state and the active classes have different colors.

Menu

I did not find any example in Vuetify documents with a menu with elements nested and not nested, but I found this template which is exactly what I’m looking for.

An example I made in Codepen

vue.js vue.js-2 vuetify

  • You can leave the colors of the "subItems" already defined with a class or style same. It is understood that to display them the "parent item" must be active. Then I left a color already defined.

  • @Rubensbarbosa, sorry I didn’t understand your answer exactly, should I leave a style with the color already set for a subitem? When I define this color="#1976d2" in v-list-group it already uses this color as the subitens color respectively. Please check the example in Codepen there you will see that the class "daughter" uses the same color as the parent element, the problem is when I switch to an item outside the scope of the sub-items.

1 answer

0


To fix this problem it is necessary to put on v-list-group the property groupfollowed by the URL path

Following is the example of Codepen:

<v-list-group
  :group="'admin'"      
  v-model="item.active"
  :prepend-icon="item.icon"
  no-action
  color="#1976d2"
>
....
</v-list-group>

Browser other questions tagged vue.js vue.js-2 vuetify

You are not signed in. Login or sign up in order to post.