Bottom align item in sidebar

by

Using vuetify I am unable to determine the correct way of using flex to position a list at the bottom of a side nagiation drawer. I have tried a number of combinations the newest of which is as follows:

<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 problem with this approach is that the items move around when the drawer is opening and closing. What would be the simplest layout of columns and rows to get the second list aligned to the bottom without side effects?

6 thoughts on “Bottom align item in sidebar”

  1. It looks like what you’ve written is already working appropriately, is this the intended behavior below?

    <!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <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>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      data () {
    return {
      drawer: true
    }
  }
    })
  </script>
</body>
</html>
    Reply

Leave a Comment