refactor: everything to nuxt.js

app/components/LeftDrawer.vue

@@ -0,0 +1,78 @@
+<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>