fix(ui): hidden components on hard reload

quasar.config.ts

@@ -81,13 +81,13 @@ export default defineConfig(function () {
       // This works around CORS problems when developing locally, using the Appwrite backend
       proxy: {
         '/api': {
-          target: 'https://apidev.bab.toal.ca/',
+          target: 'https://appwrite.toal.ca/',
           changeOrigin: true,
           secure: false,
           rewrite: (path) => path.replace(/^\/api/, ''),
         },
         '/api/v1/realtime': {
-          target: 'wss://apidev.bab.toal.ca',
+          target: 'wss://appwrite.toal.ca',
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/api/, ''),
           secure: false,

src/layouts/MainLayout.vue

@@ -1,8 +1,19 @@
 <template>
   <q-layout view="hHh Lpr fFf">
-    <ToolbarComponent
+    <q-header elevated>
-      :pageTitle="route.meta.title as string"
+      <q-toolbar>
-      @drawer-toggle="toggleLeftDrawer" />
+        <q-btn
+          flat
+          dense
+          round
+          icon="menu"
+          aria-label="Menu"
+          @click="toggleLeftDrawer" />
+        <q-toolbar-title>{{ route.meta.title as string }}</q-toolbar-title>
+        <q-space />
+        <div>v{{ APP_VERSION }}</div>
+      </q-toolbar>
+    </q-header>
     <LeftDrawer
       :drawer="leftDrawerOpen"
       @drawer-toggle="toggleLeftDrawer" />
@@ -20,8 +31,8 @@ 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';
+import { APP_VERSION } from 'src/version';
 
 const q = useQuasar();
 const route = useRoute();