I am trying to create a Navigation Drawer with nested list items like this one: Vuetify Material Dashboard
Here's how are my code looks like
<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 a non-nested list-item the other items still with the active state, and the active classes have different colors.
I didn't found any example on Vuetify's docs with a menu with nested and non-nested elements but found that template which is exactly what I am looking for.
Does anyone know how to do something like that?