From 556172860525a0ddbc2ae75371cba13f06119018 Mon Sep 17 00:00:00 2001
From: Arthur Danjou <arthurdanjou@outlook.fr>
Date: Tue, 29 Jul 2025 14:25:32 +0000
Subject: [PATCH] =?UTF-8?q?Refactor=20le=20composant=20AppBackground=20pou?=
 =?UTF-8?q?r=20utiliser=20des=20chemins=20de=20navigation=20dans=20la=20lo?=
 =?UTF-8?q?gique=20de=20couleur=20et=20mise=20=C3=A0=20jour=20des=20couleu?=
 =?UTF-8?q?rs=20de=20d=C3=A9grad=C3=A9.=20Modification=20de=20l'interface?=
 =?UTF-8?q?=20NavColorGroup=20pour=20remplacer=20'label'=20par=20'path'.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/AppBackground.vue | 44 ++++++++++++++++------------
 types/index.ts                   | 50 ++++++++++++++++----------------
 2 files changed, 50 insertions(+), 44 deletions(-)

diff --git a/app/components/AppBackground.vue b/app/components/AppBackground.vue
index 1074ab0..f65f566 100644
--- a/app/components/AppBackground.vue
+++ b/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>
diff --git a/types/index.ts b/types/index.ts
index 5e219c9..4b5f960 100644
--- a/types/index.ts
+++ b/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,
     }],
   },