fix(ui): layout fixes

src/components/LeftDrawer.vue

@@ -78,7 +78,7 @@ import { APP_VERSION } from 'src/version';
 function showAbout() {
   Dialog.create({
     title: 'OYS Borrow a Boat',
-    message: `Version ${APP_VERSION}<br>Manage a Borrow a Boat program for a Yacht Club.<br><br>© Ottawa Yacht Squadron`,
+    message: `Version ${APP_VERSION}<br>Manage a Borrow a Boat program for a Yacht Club.<br><br>© Oakville Yacht Squadron`,
     html: true,
   });
 }

src/components/ToolbarComponent.vue

@@ -7,28 +7,20 @@
         round
         icon="menu"
         aria-label="Menu"
-        @click="toggleLeftDrawer" />
+        @click="$emit('drawer-toggle')" />
 
       <q-toolbar-title>{{ pageTitle }}</q-toolbar-title>
       <q-space />
       <div>v{{ APP_VERSION }}</div>
     </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';
 import { APP_VERSION } from 'src/version';
 
-const leftDrawerOpen = ref(false);
-function toggleLeftDrawer() {
-  leftDrawerOpen.value = !leftDrawerOpen.value;
-}
 defineProps({
   pageTitle: String,
 });
+defineEmits(['drawer-toggle']);
 </script>

src/layouts/MainLayout.vue

@@ -1,6 +1,11 @@
 <template>
   <q-layout view="hHh Lpr fFf">
-    <ToolbarComponent :pageTitle="route.meta.title as string" />
+    <ToolbarComponent
+      :pageTitle="route.meta.title as string"
+      @drawer-toggle="toggleLeftDrawer" />
+    <LeftDrawer
+      :drawer="leftDrawerOpen"
+      @drawer-toggle="toggleLeftDrawer" />
     <q-page-container>
       <router-view />
     </q-page-container>
@@ -11,13 +16,19 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue';
 import { useQuasar } from 'quasar';
 import { useRoute } from 'vue-router';
 import BottomNavComponent from 'src/components/BottomNavComponent.vue';
 import ToolbarComponent from 'src/components/ToolbarComponent.vue';
+import LeftDrawer from 'src/components/LeftDrawer.vue';
 
 const q = useQuasar();
 const route = useRoute();
+const leftDrawerOpen = ref(false);
+function toggleLeftDrawer() {
+  leftDrawerOpen.value = !leftDrawerOpen.value;
+}
 // q.fullscreen.request();
 q.addressbarColor.set('#14539a');
 </script>