create dropdown

assets/js/dropdown.js

@@ -0,0 +1,43 @@
+export function initDropdowns() {
+  const dropdowns = document.querySelectorAll('.dropdown');
+
+  dropdowns.forEach(dropdown => {
+    const trigger = dropdown.querySelector('.dropdown__trigger');
+
+    if (!trigger) return;
+
+    trigger.addEventListener('click', (e) => {
+      e.stopPropagation();
+
+      // Ferme les autres dropdowns ouverts
+      dropdowns.forEach(other => {
+        if (other !== dropdown) {
+          other.classList.remove('is-open');
+          other.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
+        }
+      });
+
+      // Toggle le dropdown actuel
+      dropdown.classList.toggle('is-open');
+      trigger.classList.toggle('is-selected');
+    });
+  });
+
+  // Ferme tous les dropdowns au clic extérieur
+  document.addEventListener('click', () => {
+    dropdowns.forEach(dropdown => {
+      dropdown.classList.remove('is-open');
+      dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
+    });
+  });
+
+  // Ferme au press Escape
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      dropdowns.forEach(dropdown => {
+        dropdown.classList.remove('is-open');
+        dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
+      });
+    }
+  });
+}

assets/js/script.js

@@ -5,6 +5,7 @@ import { bannerStickyDesktop } from './banner-sticky-desktop.js';
 import { themeToggle } from './themeToggle.js';
 import { initHeroSlider } from './hero-slider.js';
 import { playVideo } from './hero-video.js';
+import { initDropdowns } from './dropdown.js';
 
 const responsiveMedium = 1080;
 const responsiveSmall = 768;
@@ -19,4 +20,5 @@ window.onload = async function () {
   bannerStickyDesktop(responsiveSmall);
   initHeroSlider();
   playVideo();
+  initDropdowns();
 }