Refactor components. Improve design. Improve routing

src/layouts/MainLayout.vue

@@ -12,8 +12,11 @@
         />
 
         <q-toolbar-title> OYS Borrow a Boat </q-toolbar-title>
-        <div v-if="loggedInUser">{{ loggedInUser.name }}</div>
-        <q-btn flat round dense icon="logout" @click="logout" />
+        <q-tabs shrink>
+          <q-tab>
+            <div v-if="loggedInUser">{{ loggedInUser.name.split(' ')[0] }}</div>
+          </q-tab>
+        </q-tabs>
       </q-toolbar>
     </q-header>
 
@@ -27,7 +30,6 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
 import { useAuthStore } from 'src/stores/auth';
 import LeftDrawer from 'components/LeftDrawer.vue';
@@ -38,23 +40,9 @@ const leftDrawerOpen = ref(false);
 const authStore = useAuthStore();
 const loggedInUser = authStore.currentUser;
 
-const router = useRouter();
-
 // q.fullscreen.request();
 q.addressbarColor.set('#14539a');
 
-async function logout() {
-  await authStore.logout();
-  q.notify({
-    message: 'Logged out!',
-    type: 'warning',
-    position: 'top',
-    timeout: 2000,
-    group: false,
-  });
-  router.push({ name: 'login' });
-}
-
 function toggleLeftDrawer() {
   leftDrawerOpen.value = !leftDrawerOpen.value;
 }