Update Toolbar

src/components/BoatPreviewComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-card v-for="boat in boats" :key="boat.id" flat>
+  <q-card v-for="boat in boats" :key="boat.id" flat class="my-card">
     <q-card-section>
       <q-img :src="boat.imgsrc" :fit="'scale-down'">
         <div class="row absolute-top">
@@ -21,7 +21,7 @@
 </template>
 
 <script setup lang="ts">
-import { Boat } from './models';
+import { Boat } from 'src/stores/boat';
 
 defineProps({
   boats: Array<Boat>,

src/components/ToolbarComponent.vue

@@ -0,0 +1,30 @@
+<template>
+  <q-header elevated>
+    <q-toolbar>
+      <q-btn
+        flat
+        dense
+        round
+        icon="menu"
+        aria-label="Menu"
+        @click="toggleLeftDrawer"
+      />
+
+      <q-toolbar-title> OYS Borrow a Boat </q-toolbar-title>
+      <q-tabs shrink>
+        <q-tab> </q-tab>
+      </q-tabs>
+    </q-toolbar>
+  </q-header>
+  <LeftDrawer :drawer="leftDrawerOpen" @drawer-toggle="toggleLeftDrawer" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import LeftDrawer from 'components/LeftDrawer.vue';
+
+const leftDrawerOpen = ref(false);
+function toggleLeftDrawer() {
+  leftDrawerOpen.value = !leftDrawerOpen.value;
+}
+</script>