fix(nav): corrige le menu mobile invisible après fermeture puis agrandissement

src/_data/i18n/en/navigation.json

@@ -1,6 +1,7 @@
 [
   { "text": "Solutions", "url": "/en/#solutions" },
   { "text": "Our projects", "url": "/en/#projets" },
+  { "text": "Partners", "url": "/en/#partenaires" },
   { "text": "DJANGOKAM", "url": "/en/#djangokam" },
   { "text": "Services", "url": "/en/#hebergement" },
   { "text": "Donate", "url": "/en/donate/" },

src/_data/i18n/en/partners.json

@@ -2,25 +2,32 @@
   "section_title": "Our",
   "section_title_accent": "Partners",
   "section_subtitle": "They share our values and help enrich our free digital ecosystem",
-  "link_text": "Discover on GADE",
   "items": [
     {
       "name": "Joukawouvè",
       "logo": "/assets/images/joukawouve.png",
       "description": "Sharing Guadeloupean and international news.",
-      "url": "https://gade.o-k-i.net/accounts/joukawouve"
+      "links": [
+        { "url": "https://kute.o-k-i.net/@joukawouve", "text": "Discover on KUTE" },
+        { "url": "https://bokante.o-k-i.net/@joukawouve", "text": "Discover on BOKANTE" },
+        { "url": "https://gade.o-k-i.net/accounts/joukawouve", "text": "Discover on GADE" }
+      ]
     },
     {
       "name": "cyber-mawonaj",
       "logo": "/assets/images/cyber_mawonaj.jpg",
       "description": "Towards digital mawonaj - Winning your freedom also runs through the digital world.",
-      "url": "https://gade.o-k-i.net/c/cyber_mawonaj/videos"
+      "links": [
+        { "url": "https://gade.o-k-i.net/c/cyber_mawonaj/videos", "text": "Discover on GADE" }
+      ]
     },
     {
       "name": "Aktivist Vybz #AKV",
       "logo": "/assets/images/akv.png",
       "description": "Committed selectors and DJs, with content focused on activism and cultural expression.",
-      "url": "https://gade.o-k-i.net/accounts/aktivist_vybz_akv"
+      "links": [
+        { "url": "https://gade.o-k-i.net/accounts/aktivist_vybz_akv", "text": "Discover on GADE" }
+      ]
     }
   ]
 }

src/_data/i18n/fr/navigation.json

@@ -1,6 +1,7 @@
 [
   { "text": "Solutions", "url": "/#solutions" },
   { "text": "Nos projets", "url": "/#projets" },
+  { "text": "Partenaires", "url": "/#partenaires" },
   { "text": "DJANGOKAM", "url": "/#djangokam" },
   { "text": "Services", "url": "/#hebergement" },
   { "text": "Dons", "url": "/dons/" },

src/_data/i18n/fr/partners.json

@@ -2,25 +2,32 @@
   "section_title": "Nos",
   "section_title_accent": "Partenaires",
   "section_subtitle": "Ils partagent nos valeurs et contribuent à enrichir notre écosystème numérique libre",
-  "link_text": "Découvrir sur GADE",
   "items": [
     {
       "name": "Joukawouvè",
       "logo": "/assets/images/joukawouve.png",
       "description": "Partage de l'actualité guadeloupéenne et internationale.",
-      "url": "https://gade.o-k-i.net/accounts/joukawouve"
+      "links": [
+        { "url": "https://kute.o-k-i.net/@joukawouve", "text": "Découvrir sur KUTE" },
+        { "url": "https://bokante.o-k-i.net/@joukawouve", "text": "Découvrir sur BOKANTE" },
+        { "url": "https://gade.o-k-i.net/accounts/joukawouve", "text": "Découvrir sur GADE" }
+      ]
     },
     {
       "name": "cyber-mawonaj",
       "logo": "/assets/images/cyber_mawonaj.jpg",
       "description": "Vers le mawonaj numérique - Conquérir sa liberté passe aussi par le numérique.",
-      "url": "https://gade.o-k-i.net/c/cyber_mawonaj/videos"
+      "links": [
+        { "url": "https://gade.o-k-i.net/c/cyber_mawonaj/videos", "text": "Découvrir sur GADE" }
+      ]
     },
     {
       "name": "Aktivist Vybz #AKV",
       "logo": "/assets/images/akv.png",
       "description": "Sélecteurs et DJs engagés, avec un contenu axé sur l'activisme et l'expression culturelle.",
-      "url": "https://gade.o-k-i.net/accounts/aktivist_vybz_akv"
+      "links": [
+        { "url": "https://gade.o-k-i.net/accounts/aktivist_vybz_akv", "text": "Découvrir sur GADE" }
+      ]
     }
   ]
 }

src/_includes/partials/partners.njk

@@ -7,16 +7,20 @@
 
         <div class="partners-grid">
             {% for partner in t.partners.items %}
-            <a href="{{ partner.url }}" target="_blank" rel="noopener noreferrer" class="partner-card">
+            <div class="partner-card">
                 <div class="partner-logo-container">
                     <img src="{{ partner.logo | cdn }}" alt="Logo {{ partner.name }}" class="partner-logo">
                 </div>
                 <h3>{{ partner.name }}</h3>
                 <p class="partner-description">{{ partner.description }}</p>
-                <span class="partner-link">
+                <div class="partner-links">
-                    {{ t.partners.link_text }} →
+                    {% for link in partner.links %}
-                </span>
+                    <a href="{{ link.url }}" target="_blank" rel="noopener noreferrer" class="partner-link">
-            </a>
+                        {{ link.text }} →
+                    </a>
+                    {% endfor %}
+                </div>
+            </div>
             {% endfor %}
         </div>
     </div>

src/assets/css/styles.css

@@ -959,8 +959,6 @@ html.light-theme .hero::before {
     padding: 2.5rem;
     text-align: center;
     transition: transform 0.2s ease, border-color 0.2s ease;
-    text-decoration: none;
-    color: inherit;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -1002,6 +1000,13 @@ html.light-theme .hero::before {
     font-family: var(--font-body);
 }
 
+.partner-links {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.6rem;
+}
+
 .partner-link {
     color: var(--or-oki);
     font-weight: 600;
@@ -1009,11 +1014,17 @@ html.light-theme .hero::before {
     align-items: center;
     gap: 0.4rem;
     font-family: var(--font-body);
-    transition: gap 0.2s ease;
+    font-size: 0.95rem;
+    padding: 0.4rem 0.9rem;
+    border: 1px solid var(--or-oki);
+    border-radius: 999px;
+    text-decoration: none;
+    transition: background 0.2s ease, gap 0.2s ease;
 }
 
-.partner-card:hover .partner-link {
+.partner-link:hover {
-    gap: 0.75rem;
+    background: rgba(253, 184, 19, 0.12);
+    gap: 0.6rem;
 }
 
 /* Support Section */
@@ -1493,15 +1504,43 @@ input[type="number"]:focus {
 }
 
 /* Responsive */
-@media (max-width: 768px) {
+@media (max-width: 1100px) {
     .nav-links {
         display: none;
     }
 
+    .nav-links.mobile-open {
+        display: flex;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        flex-direction: column;
+        padding: 1rem;
+        border-top: 2px solid var(--or-oki);
+        background: rgba(0, 0, 0, 0.98);
+    }
+
+    html.light-theme .nav-links.mobile-open {
+        background: rgba(255, 248, 231, 0.98);
+    }
+
     .nav-container {
         gap: 1rem;
     }
 
+    .menu-toggle.open span:nth-child(1) {
+        transform: rotate(45deg) translateY(8px);
+    }
+
+    .menu-toggle.open span:nth-child(2) {
+        opacity: 0;
+    }
+
+    .menu-toggle.open span:nth-child(3) {
+        transform: rotate(-45deg) translateY(-8px);
+    }
+
     .theme-toggle {
         padding: 0.4rem 0.6rem;
         font-size: 1rem;
@@ -1535,7 +1574,9 @@ input[type="number"]:focus {
         padding: 0.4rem 0;
         font-size: 0.9rem;
     }
+}
 
+@media (max-width: 768px) {
     .hero h1 {
         font-size: 2rem;
     }

src/assets/js/main.js

@@ -21,13 +21,6 @@
         // Sauvegarder la préférence
         localStorage.setItem('oki-theme', newTheme);
 
-        // Mettre à jour le menu mobile si ouvert
-        const navLinks = document.querySelector('.nav-links');
-        if (navLinks && navLinks.style.display === 'flex') {
-            const background = newTheme === 'light' ? 'rgba(255, 248, 231, 0.98)' : 'rgba(0, 0, 0, 0.98)';
-            navLinks.style.background = background;
-        }
-
         // Mettre à jour les styles de la nav en fonction du scroll actuel
         const nav = document.querySelector('nav');
         const currentScroll = window.pageYOffset;
@@ -134,32 +127,18 @@ let menuOpen = false;
 
 menuToggle?.addEventListener('click', () => {
     menuOpen = !menuOpen;
-    if (menuOpen) {
+    navLinks.classList.toggle('mobile-open', menuOpen);
-        // Déterminer le fond selon le thème actuel
+    menuToggle.classList.toggle('open', menuOpen);
-        const isLightTheme = document.documentElement.classList.contains('light-theme');
+});
-        const background = isLightTheme ? 'rgba(255, 248, 231, 0.98)' : 'rgba(0, 0, 0, 0.98)';
 
-        navLinks.style.display = 'flex';
+// Si la fenêtre est agrandie au-delà du breakpoint mobile pendant que le
-        navLinks.style.position = 'absolute';
+// menu est ouvert, on réinitialise son état pour éviter qu'il reste caché
-        navLinks.style.top = '100%';
+// ou en position absolue quand la nav desktop redevient visible.
-        navLinks.style.left = '0';
+window.addEventListener('resize', () => {
-        navLinks.style.right = '0';
+    if (menuOpen && window.innerWidth > 1100) {
-        navLinks.style.background = background;
+        menuOpen = false;
-        navLinks.style.flexDirection = 'column';
+        navLinks.classList.remove('mobile-open');
-        navLinks.style.padding = '1rem';
+        menuToggle.classList.remove('open');
-        navLinks.style.borderTop = '2px solid #E8A625';
-
-        // Animate menu toggle
-        menuToggle.children[0].style.transform = 'rotate(45deg) translateY(8px)';
-        menuToggle.children[1].style.opacity = '0';
-        menuToggle.children[2].style.transform = 'rotate(-45deg) translateY(-8px)';
-    } else {
-        navLinks.style.display = 'none';
-
-        // Reset menu toggle
-        menuToggle.children[0].style.transform = '';
-        menuToggle.children[1].style.opacity = '1';
-        menuToggle.children[2].style.transform = '';
     }
 });
 

src/en/index.njk

@@ -5,6 +5,7 @@ layout: layouts/base.njk
 {% include "partials/hero.njk" %}
 {% include "partials/publics.njk" %}
 {% include "partials/projects.njk" %}
+{% include "partials/partners.njk" %}
 {% include "partials/djangokam.njk" %}
 {% include "partials/mission.njk" %}
 {% include "partials/hosting.njk" %}

src/index.njk

@@ -5,6 +5,7 @@ layout: layouts/base.njk
 {% include "partials/hero.njk" %}
 {% include "partials/publics.njk" %}
 {% include "partials/projects.njk" %}
+{% include "partials/partners.njk" %}
 {% include "partials/djangokam.njk" %}
 {% include "partials/mission.njk" %}
 {% include "partials/hosting.njk" %}