Struggling to create an expandable sidebar menu using Vuetify2, following the documentation, but unable to prevent the expanded menu from overlapping other elements on the page.
The current behavior causes items to be pushed away and wrap onto the next row, which is not ideal. The goal is to have the sidebar expansion smoothly without disrupting the layout of other page elements.
Below is the code for the drawer component:
<v-card>
<v-navigation-drawer
v-model="drawer"
:mini-variant.sync="mini"
permanent
>
<v-list>
<v-list-item class="px-2">
<v-list-item-avatar>
<v-img src="https://randomuser.me/api/portraits/women/85.jpg"></v-img>
</v-list-item-avatar>
<v-spacer></v-spacer>
<v-btn
icon
@click.stop="mini = !mini"
>
<v-icon>mdi-chevron-left</v-icon>
</v-btn>
</v-list-item>
<v-list-item>
<v-list-item-content>
<v-list-item-title class="text-h6">
{{ $auth.user?.name }}
</v-list-item-title>
<v-list-item-subtitle>{{ $auth.user.email }}</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
</v-card>
And here is the template for the parent components:
<v-app>
<div class="row">
<navbar @change-tab="changeTab" :items="items">
</navbar>
<div class="container">
<other custom components>
</div>
</div>
<v-app>
Attempts to override z-index and overflow properties on .v-navigation-drawer and the surrounding v-card element have been unsuccessful in resolving the issue.