diff --git a/src/_data/i18n/en/navigation.json b/src/_data/i18n/en/navigation.json index 1b1d468..d4f5f3b 100644 --- a/src/_data/i18n/en/navigation.json +++ b/src/_data/i18n/en/navigation.json @@ -3,11 +3,16 @@ { "text": "Our projects", "url": "#projets" }, { "text": "DJANGOKAM", "url": "#djangokam" }, { "text": "Services", "url": "#hebergement" }, - { "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": "Resources", + "children": [ + { "text": "Our work", "url": "#clients" }, + { "text": "Our instances", "url": "#services-libres" }, + { "text": "FAQ", "url": "#faq" }, + { "text": "Press", "url": "/en/press/" }, + { "text": "Labola", "url": "https://labola.o-k-i.net/", "external": true } + ] + }, + { "text": "Contact", "url": "#contact" } ] diff --git a/src/_data/i18n/fr/navigation.json b/src/_data/i18n/fr/navigation.json index 916f466..e01e0d6 100644 --- a/src/_data/i18n/fr/navigation.json +++ b/src/_data/i18n/fr/navigation.json @@ -3,11 +3,16 @@ { "text": "Nos projets", "url": "#projets" }, { "text": "DJANGOKAM", "url": "#djangokam" }, { "text": "Services", "url": "#hebergement" }, - { "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": "Ressources", + "children": [ + { "text": "Réalisations", "url": "#clients" }, + { "text": "Nos instances", "url": "#services-libres" }, + { "text": "FAQ", "url": "#faq" }, + { "text": "Presse", "url": "/presse/" }, + { "text": "Labola", "url": "https://labola.o-k-i.net/", "external": true } + ] + }, + { "text": "Contact", "url": "#contact" } ] diff --git a/src/_includes/partials/nav.njk b/src/_includes/partials/nav.njk index 0c6aa1d..c94f691 100644 --- a/src/_includes/partials/nav.njk +++ b/src/_includes/partials/nav.njk @@ -6,11 +6,28 @@ {% if locale == 'en' %} diff --git a/src/assets/css/styles.css b/src/assets/css/styles.css index 35da7a5..396de03 100644 --- a/src/assets/css/styles.css +++ b/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; } diff --git a/src/assets/js/main.js b/src/assets/js/main.js index 09e2904..c7f303d 100644 --- a/src/assets/js/main.js +++ b/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,