add logo and some other frontend changes

resources/js/App.vue

@@ -1,10 +1,7 @@
 <script setup lang="ts">
-    import Footer from "./components/Footer.vue";
-
     import type { NavigationMenuItem } from '@nuxt/ui'
-    import { computed } from 'vue'
-    import { useHead } from '@unhead/vue'
-import HowToPlay from "./components/HowToPlay.vue";
+    import HowToPlay from "./components/HowToPlay.vue";
+    import { useColorMode } from '@vueuse/core'
 
     const items: NavigationMenuItem[] = [{
         label: 'Git',
@@ -16,6 +13,8 @@ import HowToPlay from "./components/HowToPlay.vue";
         target: '_blank'
     }, 
     ]
+
+    const mode = useColorMode();
 </script>
 
 <template>
@@ -23,7 +22,8 @@ import HowToPlay from "./components/HowToPlay.vue";
     <UApp>
     <UHeader :toggle="false">
     <template #title>
-      TLAdle
+      <img v-if="mode == 'dark'" :src="'/logo_full_long_dark.svg'" class="h-6 w-auto">
+      <img v-else :src="'/logo_full_long_light.svg'" class="h-6 w-auto">
     </template>
 
 
@@ -31,15 +31,13 @@ import HowToPlay from "./components/HowToPlay.vue";
     <template #right>
 
       <HowToPlay/>
-       <UColorModeSwitch :size="xl"/>
+       <UColorModeSwitch />
     </template>
   </UHeader>
     <UMain class="main">
-        <NuxtLayout>
             <router-view v-slot="{ Component,route }">
                 <component :is="Component" />
             </router-view>
-        </NuxtLayout>
     </UMain> 
 
         <UFooter>