I have successfully constructed a navigation within a permanent drawer using the v-list component, following the provided instructions.
When the drawer is collapsed, only the icons are displayed. Upon hovering over the collapsed drawer, it expands to reveal the names of the navigation items.
Some of the items are grouped, and clicking on them reveals sub-items.
The issue arises when I attempt to collapse the active sub-items when the drawer itself collapses.
Below is the code snippet:
<v-navigation-drawer
v-model="mainSidebarDrawer"
:mini-variant.sync="mini"
fixed
expand-on-hover
permanent
>
<v-list>
<template v-for="(n, i) in nav">
<v-list-item v-if="n.to" :key="`${i}-a`" :to="n.to" link>
<v-list-item-icon>
<v-icon small>{{ n.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ n.label }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-group
v-if="n.subItems"
:key="`${i}-b`"
:prepend-icon="`${n.icon} fa-em`"
:value="subItemsValue"
append-icon="fas fa-chevron-down fa-sm"
>
<template v-slot:activator>
<v-list-item-content>
<v-list-item-title>{{ n.label }}</v-list-item-title>
</v-list-item-content>
</template>
<v-list-item
v-for="(s, y) in n.subItems"
:key="y"
:to="s.to"
link
class="pl-8"
>
<v-list-item-icon>
<v-icon small>{{ s.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ s.label }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-group>
</template>
</v-list>
</v-navigation-drawer>
The Vue code contains:
data() {
return {
mainSidebarDrawer: true,
mini: true,
subItemsValue: false
}
}
To summarize:
- The drawer is initially collapsed showing only the icons
- Expanding on hover displays both icon and text
- Clicking on a list group expands the sub-items
- Moving the mouse away from the drawer causes it to collapse like at point 1
- List groups remain expanded. I would like them to collapse as well
I attempted to listen for changes in the mini property and implemented the following solution:
<v-navigation-drawer
...
@update:mini-variant="collapseSubItems"
</v-navigation-drawer>
methods: {
collapseSubItems() {
if (this.mini) {
this.subItemsValue = false
}
}
}
Unfortunately, the subItemsValue does not change. I also tried moving it inside the v-model. Any suggestions on how I can achieve my desired result? Thank you.