first commit

src/layouts/MainLayout.vue

@@ -0,0 +1,61 @@
+<template>
+  <q-layout view="lHh Lpr lFf">
+    <q-header elevated>
+      <q-toolbar>
+        <q-img
+          :src="localLogo"
+          alt="Logo"
+          style="width: 40px; height: 40px; background-color: var(--q-primary)"
+          class="q-mr-sm"
+        />
+        <q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" />
+
+        <q-toolbar-title> {{ productName }} </q-toolbar-title>
+
+        <div>Version {{ version }}</div>
+        <q-btn dense icon="refresh" square class="q-px-md q-ml-md" @click="refresh" />
+        <LoginMenu />
+      </q-toolbar>
+    </q-header>
+
+    <q-drawer v-model="leftDrawerOpen" bordered>
+      <q-list>
+        <q-item v-if="!autorized" to="/login" exact clickable v-ripple @click="closeDrawer">
+          <q-item-section>{{ $t('login') }}</q-item-section>
+        </q-item>
+        <q-item v-if="autorized" to="/members" exact clickable v-ripple @click="closeDrawer">
+          <q-item-section>Members</q-item-section>
+        </q-item>
+      </q-list>
+    </q-drawer>
+    <q-page-container>
+      <router-view />
+    </q-page-container>
+  </q-layout>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { version, productName } from '../../package.json';
+import LoginMenu from 'src/vueLib/login/LoginMenu.vue';
+import { useUserStore } from 'src/vueLib/login/userStore';
+import { Logo } from 'src/vueLib/models/logo';
+
+const localLogo = ref(Logo);
+
+const leftDrawerOpen = ref(false);
+const user = useUserStore();
+const autorized = computed(() => !!user.isAuthorizedAs(['admin']));
+
+function toggleLeftDrawer() {
+  leftDrawerOpen.value = !leftDrawerOpen.value;
+}
+
+function closeDrawer() {
+  leftDrawerOpen.value = false;
+}
+
+function refresh() {
+  window.location.reload();
+}
+</script>