Refactor le composant AppBackground pour utiliser le nom au lieu du chemin dans l'interface NavColorGroup et mise à jour des couleurs de navigation.

app/components/AppBackground.vue

@@ -4,29 +4,18 @@ import { navColors } from '~~/types'
 const route = useRoute()
 const colorMode = useColorMode()
 
-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,
-      }
-
-  return colors || [fallback, fallback]
+const colors = computed(() => {
+  const navColor = navColors.find(nav => route.name === nav.name)
+  if (navColor?.colors) return navColor.colors
+  
+  const fallbackColor = colorMode.value === 'dark' ? '#000000' : '#ffffff'
+  return [{ color: fallbackColor, x: 0, y: 0 }, { color: fallbackColor, x: 0, y: 0 }]
 })
 
 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%',
+  backgroundImage: colors.value
+    .map(c => `radial-gradient(circle 500px at ${c.x}% ${c.y}%, ${c.color}4D, transparent)`)
+    .join(', ')
 }))
 </script>
 

types/index.ts

@@ -179,7 +179,7 @@ interface NavColor {
 }
 
 interface NavColorGroup {
-  path: string
+  name: string
   colors: Array<NavColor>
 }
 
@@ -234,19 +234,19 @@ export const navs: Array<Nav> = [
 
 export const navColors: Array<NavColorGroup> = [
   {
-    path: 'uses',
+    name: 'uses',
     colors: [{
-      color: '#10b981',
-      x: 50,
+      color: '#00d492',
+      x: 60,
       y: 25,
     }, {
-      color: '#10b981',
-      x: 50,
+      color: '#bbf451',
+      x: 40,
       y: 75,
     }],
   },
   {
-    path: 'writings',
+    name: 'writings',
     colors: [{
       color: '#3b82f6',
       x: 20,
@@ -258,25 +258,25 @@ export const navColors: Array<NavColorGroup> = [
     }],
   },
   {
-    path: 'projects',
+    name: 'projects',
     colors: [{
-      color: '#8b5cf6',
+      color: '#ffd230',
       x: 20,
       y: 50,
     }, {
-      color: '#3b82f6',
+      color: '#fb64b6',
       x: 80,
       y: 50,
     }],
   },
   {
-    path: '',
+    name: 'index',
     colors: [{
-      color: '#f59e0b',
+      color: '#ffa1ad',
       x: 20,
       y: 80,
     }, {
-      color: '#ec4899',
+      color: '#e7000b',
       x: 80,
       y: 20,
     }],