Struggling to implement a footer in my q-drawer. Below is the template and component code I am currently using:
<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()" class="fixed-bottom">
<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, adding class="fixed-bottom" to the Sign Out item causes scrolling issues where the item overlaps other list items when the window height is reduced. How can I create a fixed footer for the Sign Out button without affecting the scroll area?