带脚部的Vue Quasar布局抽屉

试图让一个页脚出现在我的q抽屉里。这是我的模板和组件

<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>

不幸的是,如果我加上 class="fixed-bottom" 对于“注销”项目,滚动会变得混乱,当窗口垂直变小时,“注销”项开始出现在其他列表项的顶部。

如何为我的“注销”按钮制作一个不会弄乱滚动区域的固定页脚?