Hey there! I have a quick question about Vuetify. I'm looking to move the social media icons to the bottom of my navigation drawer, but I'm having some trouble figuring it out. Can anyone offer some guidance on how to achieve this using Vuetify classes/props without relying too heavily on CSS? The code I'm working with is listed below and is wrapped inside a v-navigation-drawer> tag.
Thank you in advance for your help!
https://i.sstatic.net/Qv2HY.png
<template>
<v-list>
<v-list-item two-line>
<v-list-item-content class="pb-5 text-center">
<v-list-item-title class="orange--text display-2">{{
username
}}</v-list-item-title>
<v-list-item-subtitle class="text-h6 font-weight-light white--text">{{
expertOf
}}</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<NuxtLink
v-for="(component, index) in components.filter(
(component) => component.name != 'Name'
)"
:key="index"
:to="path === '/' ? `#${component.name}` : '/'"
>
<v-list-item>
<v-list-item-content>
<v-list-item-title
><v-btn
block
depressed
class="text-capitalize font-weight-light grey darken-4"
>{{ component.name }}</v-btn
></v-list-item-title
>
</v-list-item-content>
</v-list-item>
</NuxtLink>
<NuxtLink to="/blog">
<v-list-item>
<v-list-item-content>
<v-list-item-title
><v-btn
block
depressed
class="text-capitalize font-weight-light grey darken-4"
>Blog</v-btn
></v-list-item-title
>
</v-list-item-content>
</v-list-item>
</NuxtLink>
<v-list-item class="mb-2">
<v-list-item-content>
<SocialMedia />
</v-list-item-content>
</v-list-item>
</v-list>
</template>