Add WordPress integration as Headless CMS and enhance navigation with dynamic categories

src/components/NavigationBar.vue

@@ -35,18 +35,36 @@
               <span>Textes</span>
             </div>
           </router-link>
-          <router-link
-            to="/actualites"
-            class="nav-link"
-            :class="{ 'active': $route.name === 'News' || $route.name === 'NewsArticle' }"
-          >
-            <div class="flex items-center space-x-2">
-              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
-              </svg>
-              <span>Actualités</span>
+          <template v-if="!useDropdown">
+            <router-link
+              v-for="category in dynamicCategories"
+              :key="category.id"
+              :to="getCategoryLink(category)"
+              class="nav-link"
+              :class="{ 'active': isCategoryActive(category) }"
+            >
+              <span>{{ category.name }}</span>
+            </router-link>
+          </template>
+          <div v-else class="relative group">
+            <button
+              class="nav-link"
+              :class="{ 'active': isBlogActive }"
+              type="button"
+            >
+              Blog
+            </button>
+            <div class="absolute left-0 mt-2 w-56 bg-white border border-gray-200 rounded-lg shadow-lg py-2 hidden group-hover:block">
+              <router-link
+                v-for="category in categories"
+                :key="category.id"
+                :to="getCategoryLink(category)"
+                class="dropdown-link"
+              >
+                {{ category.name }}
+              </router-link>
             </div>
-          </router-link>
+          </div>
 
           <!-- Barre de recherche -->
           <div class="relative">
@@ -83,7 +101,17 @@
         <div class="flex flex-col space-y-4">
           <router-link to="/" class="nav-link-mobile">Accueil</router-link>
           <router-link to="/textes" class="nav-link-mobile">Textes</router-link>
-          <router-link to="/actualites" class="nav-link-mobile">Actualités</router-link>
+          <div v-if="categories.length" class="pt-2 border-t border-gray-200">
+            <div class="text-xs uppercase tracking-wide text-gray-500 mb-2">Blog</div>
+            <router-link
+              v-for="category in categories"
+              :key="category.id"
+              :to="getCategoryLink(category)"
+              class="nav-link-mobile"
+            >
+              {{ category.name }}
+            </router-link>
+          </div>
           <div class="pt-2">
             <input
               v-model="searchQuery"
@@ -100,15 +128,19 @@
 </template>
 
 <script>
-import { ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { ref, computed, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { wordpressService } from '../services/wordpressService.js'
 
 export default {
   name: 'NavigationBar',
   setup() {
     const router = useRouter()
+    const route = useRoute()
     const searchQuery = ref('')
     const mobileMenuOpen = ref(false)
+    const categories = ref([])
+    const categoriesLoading = ref(false)
 
     const performSearch = () => {
       if (searchQuery.value.trim()) {
@@ -120,9 +152,55 @@ export default {
       }
     }
 
+    const loadCategories = async () => {
+      categoriesLoading.value = true
+      try {
+        categories.value = await wordpressService.getCategories()
+      } catch (error) {
+        console.error('Erreur lors du chargement des catégories:', error)
+      } finally {
+        categoriesLoading.value = false
+      }
+    }
+
+    const dynamicCategories = computed(() => {
+      return categories.value.slice(0, 4)
+    })
+
+    const useDropdown = computed(() => {
+      return categories.value.length > 4
+    })
+
+    const getCategoryLink = (category) => {
+      return category.slug === 'actualites' ? '/actualites' : `/blog/${category.slug}`
+    }
+
+    const isCategoryActive = (category) => {
+      if (category.slug === 'actualites') {
+        return route.name === 'News' || route.name === 'NewsArticle'
+      }
+
+      return route.name === 'BlogCategory' && route.params.slug === category.slug
+    }
+
+    const isBlogActive = computed(() => {
+      return route.name === 'News' || route.name === 'BlogCategory' || route.name === 'NewsArticle'
+    })
+
+    onMounted(() => {
+      loadCategories()
+    })
+
     return {
       searchQuery,
       mobileMenuOpen,
+      categories,
+      categoriesLoading,
+      dynamicCategories,
+      useDropdown,
+      isBlogActive,
+      getCategoryLink,
+      isCategoryActive,
       performSearch
     }
   }
@@ -157,4 +235,16 @@ export default {
 .nav-link-mobile:hover {
   color: black;
 }
+
+.dropdown-link {
+  display: block;
+  padding: 0.5rem 1rem;
+  color: #374151;
+  transition: color 0.2s, background-color 0.2s;
+}
+
+.dropdown-link:hover {
+  color: black;
+  background-color: #f9fafb;
+}
 </style>