Vue Quasar Layout Drawer with Footer

user_326518 0
Viewed 2061

Trying to get a footer to appear on my q-drawer. This is my template and component

<template>
  <q-layout view="hHh lpR fFf">
    <q-header elevated>
      <q-toolbar>
        <q-btn flat dense round icon="menu" aria-label="Menu" @click="drawer = !drawer" />
      </q-toolbar>
    </q-header>

    <q-drawer
      v-model="drawer"
      show-if-above
      :mini="!drawer || miniState"
      @click.capture="drawerClick"
      width="200"
      bordered
      class="no-scrollbar"
      content-class="bg-grey-3"
    >
      <q-scroll-area class="fit">
        <q-list padding>
          <q-item clickable v-ripple exact to="/">
            <q-item-section avatar>
              <q-icon name="home" />
            </q-item-section>

            <q-item-section>
              Home
            </q-item-section>
          </q-item>

          <q-item clickable v-ripple to="/install">
            <q-item-section avatar>
              <q-icon name="get_app" />
            </q-item-section>

            <q-item-section>
              Install
            </q-item-section>
          </q-item>

          <q-item clickable v-ripple to="/manage">
            <q-item-section>
              Manage
            </q-item-section>
          </q-item>

          
          <!-- I want the below to appear down at the bottom of the drawer as a footer -->

          <q-separator />

          <q-item clickable v-ripple @click="$msal.signOut()">
            <q-item-section avatar>
              <q-icon name="logout" />
            </q-item-section>

            <q-item-section>
              Sign Out
            </q-item-section>
          </q-item>
        </q-list>
      </q-scroll-area>

      <div class="q-mini-drawer-hide absolute" style="top: 15px; right: -17px">
        <q-btn dense round unelevated color="blue" icon="chevron_left" @click="miniState = true" />
      </div>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script lang="ts">
import { defineComponent } from '@vue/composition-api';

export default defineComponent({
  data() {
    return {
      drawer: false,
      miniState: false
    };
  },

  methods: {
    drawerClick(e: Event) {
      if (this.miniState) {
        this.miniState = false;
        e.stopPropagation();
      }
    }
  }
});
</script>

Unfortunately, if I add class="fixed-bottom" to the Sign Out item, the scrolling gets messed up and when the window gets small enough vertically, the Sign Out item starts appearing on top of the other list items.

How can I make a fixed footer for my Sign Out button that doesn't mess up the scroll area?

quasar-framework vue.js css
1 Answers

You can apply

content-class="column justify-between no-wrap"

to the q-drawer, and create a spacer with the col-grow class applied, in order to push the last element of the drawer to the bottom.

Make sure you wrap all drawer sub-elements in q-item tags. Notice I removed q-scroll in my Codepen, as I prefer to let the browser handle the vertical-scroll natively.

See Codepen

In case you really need to have your drawer's footer visible at all times, I don't think there is another way but to give it a position: absolute.
In that case, you'll have to create a class (or inline style) with position: relative to apply to the q-drawer (still using content-class= instead of class=).

user_4189740
Related