Vuetify: How to add an avatar or an icon to the bottom of a navigation drawer

Question

I'm trying to create a sidebar,using Vuetify, where there will be some common actions on the top and the user avatar will be on the bottom.

I'm using v-navigation-drawer and so far I've come up with this:

<template>
    <v-navigation-drawer 
        app 
        permanent
        mini-variant="true"
        class="cyan lighten-3"
    >
        <v-list>
            <!-- Timeline action -->
            <v-list-tile> 
                <v-list-tile-action>
                    <v-btn
                        flat
                        exact
                        icon 
                        color="white"
                    >     
                        <v-icon>timeline</v-icon>
                    </v-btn>              
                </v-list-tile-action>
            </v-list-tile>
            <!-- Sms action -->
            <v-list-tile> 
                <v-list-tile-action>
                    <v-btn
                        flat
                        exact
                        icon 
                        color="white"
                    >     
                        <v-icon>sms</v-icon>
                    </v-btn>              
                </v-list-tile-action>
            </v-list-tile>
            <!-- Calendar action -->
            <v-list-tile> 
                <v-list-tile-action>
                    <v-btn
                        flat
                        exact
                        icon 
                        color="white"
                    >     
                        <v-icon>calendar_today</v-icon>
                    </v-btn>              
                </v-list-tile-action>
            </v-list-tile>
            <!-- Settings Action -->
            <v-list-tile> 
                <v-list-tile-action>
                    <v-btn
                        flat
                        exact
                        icon
                        color="white"
                    >     
                        <v-icon>settings</v-icon>
                    </v-btn>              
                </v-list-tile-action>
            </v-list-tile>
        </v-list>
        <v-divider></v-divider>
        <!--This should be the avatar but I used a btn for demo purposes-->
        <v-btn
            flat
            exact
            icon
            bottom
            color="red"
        >     
            <v-icon>timeline</v-icon>
        </v-btn>              

    </v-navigation-drawer>
</template>
<!-- <script> and <style> follow after this-->

So as you can see after my v-list I've utilized a v-divider and placed the icon (or avatar) below.

The problem is that I cannot move this all the way to the bottom of the v-navigation-drawer. I tried using v-flex around the v-list and the final v-btn but to no avail.

What am I missing here?

Answer 1

You can use a slot inside your navigation drawer component like so :

<template v-slot:append>
    <div class="pa-2">
       <v-btn block>Logout</v-btn>
    </div>
 </template>

Answer 2

Adding justify-end to the button and wrapping list and btn in v-layout with column and fill-height should do the work for you: https://codepen.io/anon/pen/daMXqp?editors=1000

  <v-layout align-center justify-space-between column fill-height>
    <v-list>
      ...
    </v-list>
    <v-btn
           justify-end
           flat
           exact
           icon
           color="green"
           ><v-icon>dashboard</v-icon></v-btn> 
  </v-layout>