Struggling with Vuetify, I can't seem to figure out how to use flex properly to position a list at the bottom of a side navigation drawer. My latest attempt is:
<template>
<v-app id="inspire">
<v-navigation-drawer
v-model="drawer"
app
color="grey lighten-3"
mini-variant
permanent
expand-on-hover
class="d-flex fill-height"
>
<v-row class="fill-height">
<v-col class="align-self-start justify-start">
<v-avatar></v-avatar>
<v-divider></v-divider>
<v-list>
<v-list-item-group>
<v-list-item>
<v-list-item-icon>
<v-icon>mdi-map-search-outline</v-icon>
</v-list-item-icon>
<v-list-item-content>Search</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-icon>
<v-icon>mdi-compare</v-icon>
</v-list-item-icon>
<v-list-item-content>Compare</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-icon>
<v-icon>mdi-trophy</v-icon>
</v-list-item-icon>
<v-list-item-content>Ranked</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
</v-col>
<v-col dense class="align-self-end justify-end">
<v-list>
<v-list-item-group>
<v-list-item>
<v-list-item-icon>
<v-icon>mdi-account</v-icon>
</v-list-item-icon>
<v-list-item-content>Account</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
</v-col>
</v-row>
</v-navigation-drawer>
<v-main>
<!-- -->
</v-main>
</v-app>
</template>
<script>
export default {
data () {
return {
drawer: true
}
}
}
</script>
The issue I'm facing with this setup is that the items shift when opening or closing the drawer. What would be the best way to align the second list to the bottom without any unwanted movements?