Basic calendar view

src/components/BoatPreviewComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-card v-for="boat in boats" :key="boat.id" flat class="my-card">
+  <q-card v-for="boat in boats" :key="boat.id" flat class="mobile-card">
     <q-card-section>
       <q-img :src="boat.imgsrc" :fit="'scale-down'">
         <div class="row absolute-top">
@@ -27,9 +27,3 @@ defineProps({
   boats: Array<Boat>,
 });
 </script>
-
-<style lang="sass" scoped>
-.my-card
-  width: 100%
-  max-width: 400px
-</style>

src/components/BottomNavComponent.vue

@@ -0,0 +1,26 @@
+<template>
+  <q-tabs class="mobile-only">
+    <!-- <q-tab name="Home" icon="home" to="index"></q-tab> -->
+    <q-route-tab name="Boats" icon="sailing" to="/boat"></q-route-tab>
+    <q-route-tab
+      name="Schedule"
+      icon="calendar_month"
+      to="/schedule"
+    ></q-route-tab>
+    <q-route-tab
+      name="Checklists"
+      icon="checklist"
+      to="/checklist"
+    ></q-route-tab>
+    <q-route-tab
+      name="Reference"
+      icon="info_outline"
+      to="/reference"
+    ></q-route-tab>
+    <q-route-tab name="Tasks" icon="build" to="/task">
+      <q-badge color="red" floating> NEW </q-badge>
+    </q-route-tab>
+  </q-tabs>
+</template>
+
+<script setup lang="ts"></script>

src/components/LeftDrawer.vue

@@ -3,7 +3,7 @@
     :model-value="drawer"
     show-if-above
     :width="200"
-    :breakpoint="500"
+    :breakpoint="1024"
     @update:model-value="$emit('drawer-toggle')"
   >
     <q-scroll-area class="fit">

src/components/ReferencePreviewComponent.vue

@@ -3,7 +3,6 @@
     flat
     bordered
     class="my-card"
-    :class="$q.dark.isActive ? 'bg-grey-9' : 'bg-grey-2'"
     v-for="entry in entries"
     :key="entry.title"
   >
@@ -43,7 +42,7 @@
 </template>
 
 <script setup lang="ts">
-import { ReferenceEntry } from './models';
+import { ReferenceEntry } from 'src/stores/reference';
 
 defineProps({
   entries: Array<ReferenceEntry>,

src/components/ToolbarComponent.vue

@@ -10,7 +10,7 @@
         @click="toggleLeftDrawer"
       />
 
-      <q-toolbar-title> OYS Borrow a Boat </q-toolbar-title>
+      <q-toolbar-title> {{ pageTitle }} </q-toolbar-title>
       <q-tabs shrink>
         <q-tab> </q-tab>
       </q-tabs>
@@ -27,4 +27,7 @@ const leftDrawerOpen = ref(false);
 function toggleLeftDrawer() {
   leftDrawerOpen.value = !leftDrawerOpen.value;
 }
+defineProps({
+  pageTitle: String,
+});
 </script>