79 lines
2.4 KiB
Vue
79 lines
2.4 KiB
Vue
<script lang="ts" setup>
|
|
import { Dialog } from 'quasar';
|
|
import { useNavLinks } from '~/utils/navlinks';
|
|
import { useAuthStore } from '~/stores/auth';
|
|
import { APP_VERSION } from '~/utils/version';
|
|
|
|
defineProps(['drawer']);
|
|
defineEmits(['drawer-toggle']);
|
|
|
|
const { enabledLinks } = useNavLinks();
|
|
const authStore = useAuthStore();
|
|
|
|
function showAbout() {
|
|
Dialog.create({
|
|
title: 'OYS Borrow a Boat',
|
|
message: `Version ${APP_VERSION}<br>Manage a Borrow a Boat program for a Yacht Club.<br><br>© Oakville Yacht Squadron`,
|
|
html: true,
|
|
});
|
|
}
|
|
|
|
async function logout() {
|
|
await authStore.logout();
|
|
await navigateTo('/login');
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<q-drawer
|
|
:model-value="drawer"
|
|
show-if-above
|
|
:width="200"
|
|
:breakpoint="1024"
|
|
@update:model-value="$emit('drawer-toggle')">
|
|
<q-scroll-area class="fit">
|
|
<q-list padding class="menu-list">
|
|
<template v-for="link in enabledLinks" :key="link.name">
|
|
<q-item clickable v-ripple :to="link.to">
|
|
<q-item-section avatar>
|
|
<q-icon :name="link.icon" />
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<span :class="link.color ? `text-${link.color}` : ''">
|
|
{{ link.name }}
|
|
</span>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-list v-if="link.sublinks">
|
|
<div v-for="sublink in link.sublinks" :key="sublink.name">
|
|
<q-item clickable v-ripple :to="sublink.to" class="q-ml-md">
|
|
<q-item-section avatar>
|
|
<q-icon :name="sublink.icon" />
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<span :class="sublink.color ? `text-${sublink.color}` : ''">
|
|
{{ sublink.name }}
|
|
</span>
|
|
</q-item-section>
|
|
</q-item>
|
|
</div>
|
|
</q-list>
|
|
</template>
|
|
<q-item clickable v-ripple @click="showAbout()">
|
|
<q-item-section avatar><q-icon name="info" /></q-item-section>
|
|
<q-item-section>About</q-item-section>
|
|
</q-item>
|
|
<q-item clickable v-ripple @click="logout()">
|
|
<q-item-section avatar><q-icon name="logout" /></q-item-section>
|
|
<q-item-section>Logout</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-scroll-area>
|
|
</q-drawer>
|
|
</template>
|
|
|
|
<style lang="sass" scoped>
|
|
.menu-list .q-item
|
|
border-radius: 0 32px 32px 0
|
|
</style>
|