Added Certification mockup

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/components/navlinks.ts

@@ -1,38 +0,0 @@
-export const links = [
-  {
-    name: 'Profile',
-    to: '/profile',
-    icon: 'account_circle',
-    front_links: false,
-  },
-  {
-    name: 'Boats',
-    to: 'boat',
-    icon: 'sailing',
-    front_links: true,
-  },
-  {
-    name: 'Booking',
-    to: '/booking',
-    icon: 'calendar_month',
-    front_links: true,
-  },
-  {
-    name: 'Certifications',
-    to: '/certifications',
-    icon: 'verified',
-    front_links: true,
-  },
-  {
-    name: 'Checklists',
-    to: '/checklists',
-    icon: 'checklist',
-    front_links: true,
-  },
-  {
-    name: 'Reference',
-    to: '/reference',
-    icon: 'info_outline',
-    front_links: true,
-  },
-];