refactor: regrouper le menu desktop dans Ressources

src/_data/i18n/en/navigation.json

@@ -3,11 +3,16 @@
   { "text": "Our projects", "url": "#projets" },
   { "text": "DJANGOKAM", "url": "#djangokam" },
   { "text": "Services", "url": "#hebergement" },
+  { "text": "Donate", "url": "#dons" },
+  {
+    "text": "Resources",
+    "children": [
       { "text": "Our work", "url": "#clients" },
       { "text": "Our instances", "url": "#services-libres" },
       { "text": "FAQ", "url": "#faq" },
-  { "text": "Donate", "url": "#dons" },
       { "text": "Press", "url": "/en/press/" },
-  { "text": "Contact", "url": "#contact" },
       { "text": "Labola", "url": "https://labola.o-k-i.net/", "external": true }
     ]
+  },
+  { "text": "Contact", "url": "#contact" }
+]

src/_data/i18n/fr/navigation.json

@@ -3,11 +3,16 @@
   { "text": "Nos projets", "url": "#projets" },
   { "text": "DJANGOKAM", "url": "#djangokam" },
   { "text": "Services", "url": "#hebergement" },
+  { "text": "Dons", "url": "#dons" },
+  {
+    "text": "Ressources",
+    "children": [
       { "text": "Réalisations", "url": "#clients" },
       { "text": "Nos instances", "url": "#services-libres" },
       { "text": "FAQ", "url": "#faq" },
-  { "text": "Dons", "url": "#dons" },
       { "text": "Presse", "url": "/presse/" },
-  { "text": "Contact", "url": "#contact" },
       { "text": "Labola", "url": "https://labola.o-k-i.net/", "external": true }
     ]
+  },
+  { "text": "Contact", "url": "#contact" }
+]

src/_includes/partials/nav.njk

@@ -6,11 +6,28 @@
         </a>
         <ul class="nav-links">
             {% for item in t.navigation %}
+            {% if item.children %}
+            <li class="has-dropdown">
+                <button type="button" class="nav-dropdown-trigger" aria-haspopup="true" aria-expanded="false">
+                    {{ item.text }} <span class="dropdown-caret">▾</span>
+                </button>
+                <ul class="nav-dropdown">
+                    {% for child in item.children %}
+                    <li>
+                        <a href="{{ child.url }}"{% if child.external %} target="_blank"{% endif %}>
+                            {{ child.text }}
+                        </a>
+                    </li>
+                    {% endfor %}
+                </ul>
+            </li>
+            {% else %}
             <li>
                 <a href="{{ item.url }}"{% if item.external %} target="_blank"{% endif %}>
                     {{ item.text }}
                 </a>
             </li>
+            {% endif %}
             {% endfor %}
         </ul>
         {% if locale == 'en' %}

src/assets/css/styles.css

@@ -298,6 +298,72 @@ html.light-theme .theme-icon-light {
     transition: 0.3s;
 }
 
+/* Nav dropdown ("Ressources") */
+.has-dropdown {
+    position: relative;
+}
+
+.nav-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+    background: none;
+    border: none;
+    padding: 0;
+    font-family: inherit;
+    font-weight: 500;
+    font-size: 0.95rem;
+    color: var(--blanc-creme);
+    cursor: pointer;
+}
+
+.nav-dropdown-trigger:hover {
+    color: var(--or-oki);
+}
+
+.dropdown-caret {
+    font-size: 0.7em;
+    transition: transform 0.2s ease;
+}
+
+.nav-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin-top: 1rem;
+    min-width: 200px;
+    list-style: none;
+    background: var(--noir-oki);
+    border: 1px solid var(--line);
+    border-radius: var(--radius-sm);
+    padding: 0.4rem 0;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-6px);
+    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
+}
+
+.has-dropdown:hover .nav-dropdown,
+.has-dropdown.open .nav-dropdown,
+.nav-dropdown-trigger:focus-visible + .nav-dropdown {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+}
+
+.has-dropdown:hover .dropdown-caret,
+.has-dropdown.open .dropdown-caret {
+    transform: rotate(180deg);
+}
+
+.nav-dropdown a {
+    display: block;
+    padding: 0.55rem 1.1rem;
+    white-space: nowrap;
+    font-size: 0.9rem;
+    color: var(--blanc-creme);
+}
+
 /* Hero Section */
 .hero {
     padding: 9rem 2rem 5rem;
@@ -1360,6 +1426,31 @@ input[type="number"]:focus {
         display: flex;
     }
 
+    .nav-dropdown-trigger {
+        pointer-events: none;
+        opacity: 0.7;
+    }
+
+    .dropdown-caret {
+        display: none;
+    }
+
+    .nav-dropdown {
+        position: static;
+        opacity: 1;
+        visibility: visible;
+        transform: none;
+        margin: 0.25rem 0 0.5rem 1rem;
+        border: none;
+        background: none;
+        padding: 0;
+    }
+
+    .nav-dropdown a {
+        padding: 0.4rem 0;
+        font-size: 0.9rem;
+    }
+
     .hero h1 {
         font-size: 2rem;
     }

src/assets/js/main.js

@@ -130,6 +130,24 @@ document.addEventListener('click', (e) => {
     }
 });
 
+// Nav dropdown ("Ressources") toggle for touch/keyboard
+document.querySelectorAll('.nav-dropdown-trigger').forEach(trigger => {
+    trigger.addEventListener('click', () => {
+        const item = trigger.closest('.has-dropdown');
+        const isOpen = item.classList.toggle('open');
+        trigger.setAttribute('aria-expanded', isOpen);
+    });
+});
+
+document.addEventListener('click', (e) => {
+    document.querySelectorAll('.has-dropdown.open').forEach(item => {
+        if (!item.contains(e.target)) {
+            item.classList.remove('open');
+            item.querySelector('.nav-dropdown-trigger')?.setAttribute('aria-expanded', 'false');
+        }
+    });
+});
+
 // Scroll animations
 const observerOptions = {
     threshold: 0.15,