Add footer with links and update UI/UX consistency

GUI/src/Layout.vue

@@ -59,7 +59,10 @@ watch(
         />
       </template>
       <template v-slot:prepend>
-        <v-app-bar-nav-icon @click="toggleDrawer()"></v-app-bar-nav-icon>
+        <v-app-bar-nav-icon
+          v-tooltip="!showDrawer ? 'Menü öffnen' : 'Menü schließen'"
+          @click="toggleDrawer()"
+        ></v-app-bar-nav-icon>
       </template>
 
       <v-app-bar-title class="title" @click="$router.push({ name: 'Home' })"
@@ -106,6 +109,21 @@ watch(
 
     <v-main>
       <router-view></router-view>
+      <v-footer
+        class="d-flex align-center justify-center ga-2 flex-wrap flex-grow-1 py-3"
+      >
+        <v-btn
+          v-for="link in routes.filter((x) => x.visible === Visibility.Footer)"
+          :key="link.path"
+          :to="link.path"
+          :text="link.name"
+          variant="text"
+          rounded
+        ></v-btn>
+        <div class="flex-1-0-100 text-center mt-2">
+          {{ new Date().getFullYear() }} — <strong>Judoteam - Stadtlohn</strong>
+        </div>
+      </v-footer>
     </v-main>
   </v-app>
 </template>

GUI/src/components/CarouselItemWithTitle.vue

@@ -24,6 +24,6 @@ const props = defineProps({
     padding: 2px;
     padding-right: 10px;
     padding-left: 10px;
-    border-radius: 0px 0px 8px 8px;
+    border-radius: 0px 0px var(--default-radius) var(--default-radius);
 }
 </style>

GUI/src/css/global.css

@@ -1,3 +1,8 @@
+:root{
+  --default-radius: 7px;
+  --red-color: #b62b2b
+}
+
 .title {
   font-weight: 600;
 }

GUI/src/plugins/routesLayout.ts

@@ -4,9 +4,12 @@ import type { RouteRecordRaw } from 'vue-router'
 import Login from '@/routes/authentication/Login.vue';
 
 export enum Visibility {
-    Hidden,
+  Hidden,
-    Authorized,
+  Authenticated,
-    Public
+  Unauthenticated,
+  Authorized,
+  Public,
+  Footer,
 }
 
 
@@ -15,8 +18,9 @@ export interface LayoutRoute {
   name: string,
   description: string,
   icon: string,
+  disableFooter?: boolean,
   visible: Visibility,
-  meta: RouteRecordRaw
+  meta?: RouteRecordRaw
 }
 
 export const routes: LayoutRoute[] = [
@@ -44,6 +48,13 @@ export const routes: LayoutRoute[] = [
       component: Login
     }
   },
+  {
+    path: "/impressum",
+    name: "Impressum",
+    description: "Impressum der Anwendung",
+    icon: "mdi-file-document",
+    visible: Visibility.Footer
+  },
   {
     path: "/notFound",
     name: "Nicht Gefunden",

GUI/src/router/index.ts

@@ -1,9 +1,9 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router';
 import { routes } from '@/plugins/routesLayout'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes: routes.map(x => x.meta)
+  routes: routes.filter(x => x.meta !== undefined).map(x => x.meta) as RouteRecordRaw[]
 })
 
 export default router

GUI/src/routes/Home.vue

@@ -14,7 +14,6 @@ const tabItems = [
 <template>
   <v-container fluid>
     <v-img class="rounded-lg" height="40vh" src="/static/images/startPage.png" cover />
-
     <main>
       <v-container
         id="main"

GUI/src/routes/authentication/Login.vue

@@ -1,9 +1,9 @@
-<script setup lang="ts">
+<script setup lang="ts"></script>
-
-</script>
 
 <template>
-  <h1>Login</h1>
+  <v-container class="">
+    <h1>Potenzieller Login</h1>
+  </v-container>
 </template>
 
 <style scoped></style>