first commit

src/layouts/MainLayout.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useQuasar } from 'quasar';
+
+import useLoader from 'stores/loader';
+import DrawerComponent from 'components/DrawerComponent.vue';
+
+const $q = useQuasar();
+const loaderStore = useLoader();
+
+const { visible } = storeToRefs(loaderStore);
+
+const leftDrawerOpen = ref($q.screen.gt.sm);
+</script>
+
+<template>
+  <q-layout view="lHh Lpr lFf">
+    <q-header style="background-color: var(--background)">
+      <div class="row items-center justify-between q-py-md q-px-lg">
+        <q-btn
+          round
+          unelevated
+          id="drawer-toggler"
+          icon="mdi-backburger"
+          :class="{ bordered: $q.dark.isActive }"
+          class="surface-2"
+          style="color: var(--gray-6)"
+          @click="leftDrawerOpen = !leftDrawerOpen"
+        />
+        <q-btn
+          round
+          unelevated
+          id="drawer-toggler"
+          icon="mdi-switch"
+          :class="{ bordered: $q.dark.isActive }"
+          class="surface-2"
+          style="color: var(--gray-6)"
+          @click="$q.dark.toggle()"
+        />
+      </div>
+    </q-header>
+
+    <q-page-container style="background-color: transparent">
+      <q-page class="q-px-lg q-pa-md">
+        <router-view />
+      </q-page>
+    </q-page-container>
+
+    <drawer-component v-model:leftDrawerOpen="leftDrawerOpen" />
+
+    <global-loading :visibility="visible" />
+  </q-layout>
+</template>