Update Toolbar

src/layouts/MainLayout.vue

@@ -1,26 +1,6 @@
 <template>
   <q-layout view="hHh Lpr lFf">
-    <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>
-            <div v-if="loggedInUser">{{ loggedInUser.name.split(' ')[0] }}</div>
-          </q-tab>
-        </q-tabs>
-      </q-toolbar>
-    </q-header>
-
-    <LeftDrawer :drawer="leftDrawerOpen" @drawer-toggle="toggleLeftDrawer" />
+    <ToolbarComponent />
 
     <q-page-container>
       <router-view />
@@ -29,21 +9,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
 import { useQuasar } from 'quasar';
-import { useAuthStore } from 'src/stores/auth';
-import LeftDrawer from 'components/LeftDrawer.vue';
+import ToolbarComponent from 'components/ToolbarComponent.vue';
 
 const q = useQuasar();
-const leftDrawerOpen = ref(false);
-
-const authStore = useAuthStore();
-const loggedInUser = authStore.currentUser;
-
 // q.fullscreen.request();
 q.addressbarColor.set('#14539a');
-
-function toggleLeftDrawer() {
-  leftDrawerOpen.value = !leftDrawerOpen.value;
-}
 </script>