first commit

frontend/src/layouts/MainLayout.vue

@@ -0,0 +1,144 @@
+<template>
+  <q-layout view="lHh Lpr lFf" class="dynamic-gradient-bg">
+    <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>
+
+        <div>Quasar v{{ $q.version }}</div>
+      </q-toolbar>
+    </q-header>
+
+    <q-drawer
+      v-model="leftDrawerOpen"
+      show-if-above
+      bordered
+    >
+      <q-list>
+        <q-item-label
+          header
+        >
+          Essential Links
+        </q-item-label>
+
+        <EssentialLink
+          v-for="link in linksList"
+          :key="link.title"
+          v-bind="link"
+        />
+      </q-list>
+    </q-drawer>
+
+    <q-page-container>
+      <router-view />
+    </q-page-container>
+
+    <q-footer elevated class="bg-white text-black font">
+      <q-tabs align="justify" dense>
+        <q-route-tab to="/" icon="home" label="Home" />
+        <q-route-tab to="/page2" icon="search" label="Suche" />
+        <q-route-tab to="/page3" icon="settings" label="Einstellungen" />
+        <!-- Füge hier weitere Tabs nach Bedarf hinzu -->
+      </q-tabs>
+    </q-footer>
+
+  </q-layout>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import EssentialLink from 'components/EssentialLink.vue'
+
+const linksList = [
+  {
+    title: 'Docs',
+    caption: 'quasar.dev',
+    icon: 'school',
+    link: 'https://quasar.dev'
+  },
+  {
+    title: 'Github',
+    caption: 'github.com/quasarframework',
+    icon: 'code',
+    link: 'https://github.com/quasarframework'
+  },
+  {
+    title: 'Discord Chat Channel',
+    caption: 'chat.quasar.dev',
+    icon: 'chat',
+    link: 'https://chat.quasar.dev'
+  },
+  {
+    title: 'Forum',
+    caption: 'forum.quasar.dev',
+    icon: 'record_voice_over',
+    link: 'https://forum.quasar.dev'
+  },
+  {
+    title: 'Twitter',
+    caption: '@quasarframework',
+    icon: 'rss_feed',
+    link: 'https://twitter.quasar.dev'
+  },
+  {
+    title: 'Facebook',
+    caption: '@QuasarFramework',
+    icon: 'public',
+    link: 'https://facebook.quasar.dev'
+  },
+  {
+    title: 'Quasar Awesome',
+    caption: 'Community Quasar projects',
+    icon: 'favorite',
+    link: 'https://awesome.quasar.dev'
+  }
+]
+
+const leftDrawerOpen = ref(false)
+
+function toggleLeftDrawer () {
+  leftDrawerOpen.value = !leftDrawerOpen.value
+}
+</script>
+
+<style>
+.dynamic-gradient-bg {
+  /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);
+   background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */
+  /*background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/
+  background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2);
+  background-size: 300% 300%;
+  animation: gradientAnimation 30s ease infinite;
+}
+
+@keyframes gradientAnimation {
+  0% {
+    background-position: 0% 0%; /* Start Links Mitte */
+  }
+  25% {
+    background-position: 100% 0%; /* Oben Rechts */
+  }
+  50% {
+    background-position: 100% 100%; /* Unten Rechts */
+  }
+  75% {
+    background-position: 0% 100%; /* Unten Links */
+  }
+  100% {
+    background-position: 0% 0%; /* Zurück zum Start Links Mitte */
+  }
+}
+.q-footer .q-tab__label {
+  font-size: 0.7rem; /* Passe diesen Wert nach Bedarf an */
+}
+</style>