feat: add app bar with theme toggle and remove weather forecast demo code

GUI/index.html

@@ -10,4 +10,4 @@
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
-</html>
+</html>

GUI/src/Layout.vue

@@ -1,8 +1,48 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { useTheme } from 'vuetify';
+
+const theme = useTheme();
+
+function changeTheme() {
+    theme.toggle();
+    localStorage.setItem("theme", theme.name.value);
+}
+
+onMounted(() => {
+    theme.change(localStorage.getItem("theme") || "light");
+});
+</script>
 
 <template>
-  <h1>You did it!</h1>
-  <router-view></router-view>
+  <v-app>
+    <v-app-bar image="./appBarIcon.png">
+      <template v-slot:image>
+        <v-img
+          :gradient="theme.name.value === 'dark' ? 'to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)' : 'to top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)'"
+        />
+      </template>
+      <template v-slot:prepend>
+          <v-app-bar-nav-icon></v-app-bar-nav-icon>
+        </template>
+
+        <v-app-bar-title class="title">Judoteam - Stadtlohn</v-app-bar-title>
+
+        <v-btn icon>
+          <v-icon>mdi-magnify</v-icon>
+        </v-btn>
+
+        <v-btn icon>
+          <v-icon>mdi-heart</v-icon>
+        </v-btn>
+
+        <v-btn icon="mdi-brightness-6" @click="changeTheme()"></v-btn>
+    </v-app-bar>
+
+    <v-main>
+      <router-view></router-view>
+    </v-main>
+  </v-app>
 </template>
 
 <style scoped></style>

GUI/src/css/global.css

@@ -0,0 +1,3 @@
+.title{
+    font-weight: 600;
+}

GUI/src/routes/Home.vue

@@ -3,6 +3,7 @@
 
 <template>
     <h1>Home Vue</h1>
+    <h2>Willkommen bei JudoWeb</h2>
 </template>
 
 <style scoped>