From 79e1dc3aa110539afdf66cf6f731d4691fe6b8cf Mon Sep 17 00:00:00 2001
From: Matthieu Bessat <mbess@mbess.net>
Date: Tue, 13 Aug 2024 14:28:51 +0200
Subject: [PATCH] fix(nav): no-js header menu

---
 assets/sass/main.scss          |  1 +
 assets/sass/nav.scss           | 11 +++++++++++
 content/signalements/_index.md |  3 +--
 layouts/partials/header.html   | 19 +++++++++++++++----
 4 files changed, 28 insertions(+), 6 deletions(-)
 create mode 100644 assets/sass/nav.scss

diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index a0dc87a..ad8cb1a 100644
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -16,6 +16,7 @@ $secondary: #f15a24;
 @import "./title.scss";
 @import "./landing.scss";
 @import "./footer.scss";
+@import "./nav.scss";
 
 .page-footer {
   border-top: 1px solid rgba(140, 130, 115, 0.15);
diff --git a/assets/sass/nav.scss b/assets/sass/nav.scss
new file mode 100644
index 0000000..1dc53b5
--- /dev/null
+++ b/assets/sass/nav.scss
@@ -0,0 +1,11 @@
+/* bs3: mobile navbar without js custom
+* ------------------------------------
+* show the collapse when navbar toggle is checked */
+#navbar-toggle-cbox:checked ~ .collapse {
+    display: block;
+}
+
+/* the checkbox used only internally; don't display it */
+#navbar-toggle-cbox {
+    display:none
+}
diff --git a/content/signalements/_index.md b/content/signalements/_index.md
index ae262c3..5fc5980 100644
--- a/content/signalements/_index.md
+++ b/content/signalements/_index.md
@@ -10,5 +10,4 @@ Sont référencés:
 - Barrières problématiques
 - Manque de stationnement adapté
 
-[Voir la carte en grand](https://umap.openstreetmap.fr/en/map/vmems-problemes-cyclables-gaillon-aubevoye_1100616
-)
+[Voir la carte en grand](https://umap.openstreetmap.fr/en/map/vmems-problemes-cyclables-gaillon-aubevoye_1100616)
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index aee91bf..bab5e0f 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,10 +1,21 @@
 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
     <div class="container">
         <a class="navbar-brand" href="/">VMEMS</a>
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <input type="checkbox" id="navbar-toggle-cbox">
+        <div class="navbar-header">
+            <label
+                for="navbar-toggle-cbox"
+                class="navbar-toggler collapsed"
+                data-toggle="collapse"
+                data-target="#navbar"
+                aria-expanded="false"
+                aria-controls="navbar"
+            >
+                <span class="visually-hidden-focusable">Ouvrir le menu</span>
+                <span class="navbar-toggler-icon"></span>
+            </label>
+        </div>
+        <div id="navbar" class="collapse navbar-collapse">
             <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                 <li class="nav-item">
                     <a class="nav-link" href="/projets">Projets cyclables</a>