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>

types/index.ts

@@ -179,7 +179,7 @@ interface NavColor {
 }
 
 interface NavColorGroup {
-  label: string
+  path: string
   colors: Array<NavColor>
 }
 
@@ -234,50 +234,50 @@ export const navs: Array<Nav> = [
 
 export const navColors: Array<NavColorGroup> = [
   {
-    label: '/',
+    path: 'uses',
     colors: [{
-      color: '#f59e0b',
-      x: 20,
-      y: 80,
+      color: '#10b981',
+      x: 50,
+      y: 25,
     }, {
-      color: '#ec4899',
-      x: 80,
-      y: 20,
+      color: '#10b981',
+      x: 50,
+      y: 75,
     }],
   },
   {
-    label: '/uses',
-    colors: [{
-      color: '#ec4899',
-      x: 20,
-      y: 80,
-    }, {
-      color: '#f59e0b',
-      x: 80,
-      y: 20,
-    }],
-  },
-  {
-    label: '/writings',
+    path: 'writings',
     colors: [{
       color: '#3b82f6',
       x: 20,
-      y: 80,
+      y: 20,
     }, {
       color: '#ec4899',
       x: 80,
-      y: 20,
+      y: 80,
     }],
   },
   {
-    label: '/projects',
+    path: 'projects',
     colors: [{
       color: '#8b5cf6',
       x: 20,
-      y: 80,
+      y: 50,
     }, {
       color: '#3b82f6',
       x: 80,
+      y: 50,
+    }],
+  },
+  {
+    path: '',
+    colors: [{
+      color: '#f59e0b',
+      x: 20,
+      y: 80,
+    }, {
+      color: '#ec4899',
+      x: 80,
       y: 20,
     }],
   },