Can someone help me figure out how to add an active state for lists in Vuetify? I want the lists to have a primary background color, just like they show in their documentation:
This is my code:
<template>
<v-navigation-drawer width="300px" :clipped="$vuetify.breakpoint.lgAndUp" app>
<v-list nav expand>
<v-list-group
v-for="(item, i) in items"
:key="i"
no-action
color="primary"
>
<template v-slot:activator>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</template>
<v-list-item
v-for="(subItem, i) in item.children"
:key="i"
@click="$router.push(subItem.path)"
>
<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>
</v-navigation-drawer>
</template>
<script>
import SidebarLinks from '@theme/components/SidebarLinks.vue'
import NavLinks from '@theme/components/NavLinks.vue'
export default {
name: 'Sidebar',
components: { SidebarLinks, NavLinks },
props: ['items']
}
</script>
I appreciate any assistance!