first commit

app/src/layouts/MainLayout.vue

@@ -0,0 +1,102 @@
+<template>
+  <q-layout view="lHh Lpr lFf">
+    <q-header elevated>
+      <q-toolbar>
+        <q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" />
+
+        <q-toolbar-title> Quasar App </q-toolbar-title>
+
+        <q-space />
+
+        <div class="row items-center no-wrap">
+          <div class="q-mr-md">Quasar v{{ $q.version }}</div>
+          <q-btn flat dense icon="language" :label="currentLocaleLabel" aria-label="Language">
+            <q-menu auto-close>
+              <q-list>
+                <q-item clickable v-for="loc in locales" :key="loc.code" @click="setLocale(loc.code)">
+                  <q-item-section>{{ loc.label }}</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </div>
+      </q-toolbar>
+    </q-header>
+
+    <q-drawer v-model="leftDrawerOpen" show-if-above bordered>
+      <q-scroll-area class="fit">
+        <div class="q-pa-md">
+          <div class="text-subtitle2 q-mb-sm">Dati contribuente</div>
+          <pre class="q-pa-sm bg-grey-2 text-body2" style="white-space:pre-wrap">{{ JSON.stringify(unref(taxpayer.data), null, 2) }}</pre>
+        </div>
+         <div class="q-pa-md">
+          <div class="text-subtitle2 q-mb-sm">Dati stato civile</div>
+          <pre class="q-pa-sm bg-grey-2 text-body2" style="white-space:pre-wrap">{{ JSON.stringify(unref(marital.data), null, 2) }}</pre>
+        </div>
+         <div class="q-pa-md">
+          <div class="text-subtitle2 q-mb-sm">Dati figli</div>
+          <pre class="q-pa-sm bg-grey-2 text-body2" style="white-space:pre-wrap">{{ JSON.stringify(unref(children.data), null, 2) }}</pre>
+        </div>
+      </q-scroll-area>
+    </q-drawer>
+
+    <q-page-container>
+      <router-view />
+    </q-page-container>
+
+    <q-footer elevated class="bg-white">
+      <q-toolbar class="q-pl-md q-pr-md">
+        <div class="row items-center no-wrap">
+          <div class="col"> </div>
+          <div>
+            <q-btn flat dense icon="language" :label="currentLocaleLabel" aria-label="Language">
+              <q-menu auto-close>
+                <q-list>
+                  <q-item clickable v-for="loc in locales" :key="loc.code" @click="setLocale(loc.code)">
+                    <q-item-section>{{ loc.label }}</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </div>
+        </div>
+      </q-toolbar>
+    </q-footer>
+  </q-layout>
+</template>
+
+<script setup lang="ts">
+import { ref, unref, computed } from 'vue';
+import { useTaxpayerStore } from '../stores/taxpayer'
+import { useMaritalStore } from '../stores/marital';
+import { useChildrenStore } from '../stores/children'
+import { useI18n } from 'vue-i18n'
+
+const leftDrawerOpen = ref(false);
+
+const taxpayer = useTaxpayerStore()
+const marital = useMaritalStore()
+const children = useChildrenStore()
+
+const { locale } = useI18n()
+
+const locales = [
+  { code: 'it-IT', label: 'Italiano' },
+  { code: 'en-US', label: 'English' },
+  { code: 'fr-FR', label: 'Français' },
+  { code: 'de-DE', label: 'Deutsch' }
+]
+
+function setLocale(code: string) {
+  locale.value = code
+}
+
+const currentLocaleLabel = computed(() => {
+  const found = locales.find(l => l.code === locale.value)
+  return found ? found.label : String(locale.value)
+})
+
+function toggleLeftDrawer() {
+  leftDrawerOpen.value = !leftDrawerOpen.value;
+}
+</script>