Refactor le composant AppBackground pour utiliser des chemins de navigation dans la logique de couleur et mise à jour des couleurs de dégradé. Modification de l'interface NavColorGroup pour remplacer 'label' par 'path'.

app/components/AppBackground.vue

@@ -4,28 +4,34 @@ import { navColors } from '~~/types'
 const route = useRoute()
 const colorMode = useColorMode()
 
-const backgroundStyle = computed(() => {
-  const colors = navColors.find(nav => nav.label === route.path)!.colors
-  const fallback = colorMode.value === 'dark' ? '#000000' : '#ffffff'
+const currentColors = computed(() => {
+  const colors = navColors.find(nav => route.path.includes(nav.path))!.colors
+  const fallback = colorMode.value === 'dark'
+    ? {
+        color: '#000000',
+        x: 0,
+        y: 0,
+      }
+    : {
+        color: '#ffffff',
+        x: 0,
+        y: 0,
+      }
 
-  const currentColors = colors || [fallback, fallback]
-
-  return {
-    colorOne: currentColors[0],
-    colorTwo: currentColors[1],
-    backgroundImage: `
-    radial-gradient(circle 500px at ${colorOne.x}% ${colorOne.y}%, ${colorOne.color}4D, transparent),
-    radial-gradient(circle 500px at ${colorTwo.x}% ${colorTwo.y}%, ${colorTwo.color}4D, transparent)
-  `,
-    backgroundSize: '100% 100%',
-  }
+  return colors || [fallback, fallback]
 })
+
+const backgroundStyle = computed(() => ({
+  backgroundImage: `
+    radial-gradient(circle 500px at ${currentColors.value[0].x}% ${currentColors.value[0].y}%, ${currentColors.value[0].color}4D, transparent),
+    radial-gradient(circle 500px at ${currentColors.value[1].x}% ${currentColors.value[1].y}%, ${currentColors.value[1].color}4D, transparent)
+  `,
+  backgroundSize: '100% 100%',
+}))
 </script>
 
 <template>
-  <ClientOnly>
-    <div class="min-h-screen w-full absolute inset-0">
-      <div class="absolute inset-0 z-0" :style="backgroundStyle" />
-    </div>
-  </ClientOnly>
+  <div class="min-h-screen w-full absolute inset-0">
+    <div class="absolute inset-0 z-0" :style="backgroundStyle" />
+  </div>
 </template>