Added Certification mockup

quasar.config.js

@@ -98,7 +98,13 @@ module.exports = configure(function (/* ctx */) {
       // directives: [],
 
       // Quasar plugins
-      plugins: ['Notify', 'LocalStorage', 'SessionStorage'],
+      plugins: [
+        'Notify',
+        'LocalStorage',
+        'SessionStorage',
+        'AppFullscreen',
+        'AddressbarColor',
+      ],
     },
 
     // animations: 'all', // --- includes all animations

src/components/CertificationComponent.vue

@@ -0,0 +1,66 @@
+<template>
+  <div>Certification</div>
+  <q-item
+    v-for="cert in certifications"
+    :key="cert.title"
+    clickable
+    v-ripple
+    class="rounded-borders"
+    :class="$q.dark.isActive ? 'bg-grey-9 text-white' : 'bg-grey-2'"
+  >
+    <q-item-section avatar>
+      <q-avatar rounded>
+        <q-icon :name="`check`" />
+      </q-avatar>
+    </q-item-section>
+
+    <q-item-section>
+      <q-item-label> {{ cert.title }} </q-item-label>
+      <q-item-label caption>
+        <q-badge color="green-4" text-color="black">
+          {{ cert.badgeText }}
+        </q-badge>
+      </q-item-label>
+    </q-item-section>
+
+    <q-item-section>
+      <span>{{ cert.description }}</span>
+    </q-item-section>
+  </q-item>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from 'vue';
+
+const certifications = [
+  {
+    title: 'J/27 Skipper',
+    badgeText: 'J/27',
+    description: 'Certified to be a skipper on a J/27 class boat.',
+  },
+  {
+    title: 'Capri 25 Skipper',
+    badgeText: 'Capri25',
+    description: 'Certified to be a skipper on a Capri 25 class boat.',
+  },
+  {
+    title: 'Night',
+    badgeText: 'Night',
+    description: 'Certified to operate boats at night',
+  },
+  {
+    title: 'Navigation',
+    badgeText: 'Nav',
+    description: 'Advanced Navigation',
+  },
+  {
+    title: 'Crew',
+    badgeText: 'crew',
+    description: 'Crew certification.',
+  },
+];
+
+defineComponent({
+  name: 'CertificationComponent',
+});
+</script>

src/components/LeftDrawer.vue

@@ -24,7 +24,7 @@
 
 <script lang="ts" setup>
 import { defineComponent } from 'vue';
-import { links } from 'components/navlinks';
+import { links } from 'src/router/navlinks.js';
 
 defineProps(['drawer']);
 defineEmits(['drawer-toggle']);

src/layouts/MainLayout.vue

@@ -40,6 +40,9 @@ const loggedInUser = authStore.currentUser;
 
 const router = useRouter();
 
+// q.fullscreen.request();
+q.addressbarColor.set('#14539a');
+
 async function logout() {
   await authStore.logout();
   q.notify({

src/pages/BookingPage.vue

@@ -0,0 +1,8 @@
+<template>
+  <q-page padding>
+    <!-- content -->
+  </q-page>
+</template>
+
+<script setup lang="ts">
+</script>

src/pages/CertificationPage.vue

@@ -0,0 +1,9 @@
+<template>
+  <q-page padding>
+    <CertificationComponent />
+  </q-page>
+</template>
+
+<script setup lang="ts">
+import CertificationComponent from 'components/CertificationComponent.vue';
+</script>

src/pages/ChecklistPage.vue

@@ -0,0 +1,8 @@
+<template>
+  <q-page padding>
+    <!-- content -->
+  </q-page>
+</template>
+
+<script setup lang="ts">
+</script>

src/pages/IndexPage.vue

@@ -11,6 +11,7 @@
           :label="link.name"
           rounded
           class="full-width"
+          :align="'left'"
         />
       </q-item>
     </q-list>
@@ -19,7 +20,7 @@
 
 <script lang="ts" setup>
 import { defineComponent } from 'vue';
-import { links } from 'components/navlinks';
+import { links } from 'src/router/navlinks.js';
 
 defineComponent({
   name: 'IndexPage',

src/pages/LoginPage.vue

@@ -106,7 +106,7 @@ function login(email: string, password: string) {
     position: 'top',
     spinner: true,
     message: 'Logging you in...',
-    timeout: 2000,
+    timeout: 8000,
     group: false,
   });
   authStore
@@ -119,6 +119,7 @@ function login(email: string, password: string) {
         spinner: false,
         icon: 'check_circle',
       });
+      console.log('Redirecting to index page');
       router.replace({ name: 'index' });
     })
     .catch(function (reason: Error) {

src/pages/ProfilePage.vue

@@ -0,0 +1,8 @@
+<template>
+  <q-page padding>
+    <!-- content -->
+  </q-page>
+</template>
+
+<script setup lang="ts">
+</script>

src/pages/ReferencePage.vue

@@ -0,0 +1,8 @@
+<template>
+  <q-page padding>
+    <!-- content -->
+  </q-page>
+</template>
+
+<script setup lang="ts">
+</script>

src/router/navlinks.ts

@@ -1,7 +1,7 @@
 export const links = [
   {
     name: 'Profile',
-    to: '/profile',
+    to: 'profile',
     icon: 'account_circle',
     front_links: false,
   },
@@ -13,25 +13,25 @@ export const links = [
   },
   {
     name: 'Booking',
-    to: '/booking',
+    to: 'booking',
     icon: 'calendar_month',
     front_links: true,
   },
   {
     name: 'Certifications',
-    to: '/certifications',
+    to: 'certification',
     icon: 'verified',
     front_links: true,
   },
   {
     name: 'Checklists',
-    to: '/checklists',
+    to: 'checklist',
     icon: 'checklist',
     front_links: true,
   },
   {
     name: 'Reference',
-    to: '/reference',
+    to: 'reference',
     icon: 'info_outline',
     front_links: true,
   },

src/router/routes.ts

@@ -15,6 +15,31 @@ const routes: RouteRecordRaw[] = [
         component: () => import('pages/BoatPage.vue'),
         name: 'boat',
       },
+      {
+        path: '/booking',
+        component: () => import('pages/BookingPage.vue'),
+        name: 'booking',
+      },
+      {
+        path: '/certification',
+        component: () => import('pages/CertificationPage.vue'),
+        name: 'certification',
+      },
+      {
+        path: '/checklist',
+        component: () => import('pages/ChecklistPage.vue'),
+        name: 'checklist',
+      },
+      {
+        path: '/profile',
+        component: () => import('pages/ProfilePage.vue'),
+        name: 'profile',
+      },
+      {
+        path: '/reference',
+        component: () => import('pages/ReferencePage.vue'),
+        name: 'reference',
+      },
     ],
   },
   {