Left Drawer Updates

src/components/LeftDrawer.vue

@@ -0,0 +1,78 @@
+<template>
+  <q-drawer
+    :model-value="drawer"
+    show-if-above
+    :width="200"
+    :breakpoint="500"
+    @update:model-value="$emit('drawer-toggle')"
+  >
+    <!-- TODO: Build this programmatically -->
+    <q-scroll-area class="fit">
+      <q-list padding class="menu-list">
+        <q-item clickable v-ripple>
+          <q-item-section avatar>
+            <q-icon name="account_circle" />
+          </q-item-section>
+
+          <q-item-section> Profile </q-item-section>
+        </q-item>
+
+        <q-item active clickable v-ripple>
+          <q-item-section avatar>
+            <q-icon name="sailing" />
+          </q-item-section>
+
+          <q-item-section> Boats </q-item-section>
+        </q-item>
+
+        <q-item clickable v-ripple>
+          <q-item-section avatar>
+            <q-icon name="calendar_month" />
+          </q-item-section>
+
+          <q-item-section> Bookings </q-item-section>
+        </q-item>
+
+        <q-item clickable v-ripple>
+          <q-item-section avatar>
+            <q-icon name="verified" />
+          </q-item-section>
+
+          <q-item-section> Certifications </q-item-section>
+        </q-item>
+
+        <q-item clickable v-ripple>
+          <q-item-section avatar>
+            <q-icon name="checklist" />
+          </q-item-section>
+
+          <q-item-section> Checklists </q-item-section>
+        </q-item>
+        <q-item clickable v-ripple>
+          <q-item-section avatar>
+            <q-icon name="info_outline" />
+          </q-item-section>
+
+          <q-item-section> Reference </q-item-section>
+        </q-item>
+      </q-list>
+    </q-scroll-area>
+  </q-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { defineComponent } from 'vue';
+
+defineProps(['drawer']);
+defineEmits(['drawer-toggle']);
+
+defineComponent({
+  name: 'LeftDrawer',
+});
+</script>
+
+<style lang="sass" scoped>
+.menu-list .q-item
+  border-radius: 0 32px 32px 0
+</style>

src/layouts/MainLayout.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-layout view="lHh Lpr lFf">
+  <q-layout view="hHh Lpr lFf">
     <q-header elevated>
       <q-toolbar>
         <q-btn
@@ -12,22 +12,12 @@
         />
 
         <q-toolbar-title> OYS Borrow a Boat </q-toolbar-title>
-        <div v-if="loggedInUser">Logged in as: {{ loggedInUser.name }}</div>
+        <div v-if="loggedInUser">{{ loggedInUser.name }}</div>
         <q-btn flat round dense icon="logout" @click="logout" />
       </q-toolbar>
     </q-header>
 
-    <q-drawer v-model="leftDrawerOpen" show-if-above bordered>
-      <q-list>
-        <q-item-label header> Essential Links </q-item-label>
-
-        <EssentialLink
-          v-for="link in linksList"
-          :key="link.title"
-          v-bind="link"
-        />
-      </q-list>
-    </q-drawer>
+    <LeftDrawer :drawer="leftDrawerOpen" @drawer-toggle="toggleLeftDrawer" />
 
     <q-page-container>
       <router-view />
@@ -36,21 +26,11 @@
 </template>
 
 <script setup lang="ts">
-import EssentialLink from 'components/EssentialLink.vue';
-import type { Models } from 'appwrite';
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
 import { useAuthStore } from 'src/stores/auth';
-
-const linksList = [
-  {
-    title: 'Docs',
-    caption: 'quasar.dev',
-    icon: 'school',
-    link: 'https://quasar.dev',
-  },
-];
+import LeftDrawer from 'components/LeftDrawer.vue';
 
 const q = useQuasar();
 const leftDrawerOpen = ref(false);

src/pages/IndexPage.vue

@@ -1,25 +1,16 @@
 <template>
   <q-page class="row items-center justify-evenly">
-    <img alt="OYS Logo" src="~assets/oysqn_logo.png" />
-    <q-input v-model="name" label="Name" color="darkblue"></q-input>
-    <q-btn label="submit" icon="send"></q-btn>
-    <example-component
-      title="Example component"
-      active
-      :todos="todos"
-      :meta="meta"
-    ></example-component>
+    <q-img alt="OYS Logo" src="~assets/oysqn_logo.png" fit="scale-down" />
   </q-page>
 </template>
 
 <script lang="ts">
 import { Todo, Meta } from 'components/models';
-import ExampleComponent from 'components/ExampleComponent.vue';
 import { defineComponent, ref } from 'vue';
 
 export default defineComponent({
   name: 'IndexPage',
-  components: { ExampleComponent },
+  components: {},
   setup() {
     const todos = ref<Todo[]>([
       {

src/router/index.ts

@@ -37,7 +37,6 @@ export default route(function (/* { store, ssrContext } */) {
 
   Router.beforeEach(async (to, from, next) => {
     const auth = useAuthStore();
-    console.log([to.meta.accountRoute, auth.currentUser]);
     return !to.meta.accountRoute && !auth.currentUser
       ? next({ name: 'login' })
       : to.meta.accountRoute && auth.currentUser