From 234bc216c585ff0dd4c22abda1f862a8c7a8f6b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?benjamin=20melan=C3=A7on?= <ben@agaric.coop>
Date: Tue, 15 Jul 2025 01:42:21 -0400
Subject: [PATCH] Add code and style for 'hamburger' menu nav

Ref #114 #126
---
 .../custom/geofresco/src/global/_layout.scss   | 18 ++++++++++++++++++
 .../src/templates/layout/page.html.twig        |  9 +++++++++
 2 files changed, 27 insertions(+)

diff --git a/web/themes/custom/geofresco/src/global/_layout.scss b/web/themes/custom/geofresco/src/global/_layout.scss
index 443ec0e..f46187d 100644
--- a/web/themes/custom/geofresco/src/global/_layout.scss
+++ b/web/themes/custom/geofresco/src/global/_layout.scss
@@ -62,3 +62,21 @@
 .node--type-people.node--view-mode-teaser {
   margin-bottom: 1rem;
 }
+
+// Main navigation, goes to code in page.html.twig
+details .burger-icon {
+  transition: transform 0.1s;
+  display: block;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: .25rem;
+  cursor: pointer;
+}
+
+details[open] .burger-icon {
+  transform: rotate(90deg);
+}
+
+summary {
+  list-style-type: none;
+}
\ No newline at end of file
diff --git a/web/themes/custom/geofresco/src/templates/layout/page.html.twig b/web/themes/custom/geofresco/src/templates/layout/page.html.twig
index 3c7e6fd..69b2b70 100644
--- a/web/themes/custom/geofresco/src/templates/layout/page.html.twig
+++ b/web/themes/custom/geofresco/src/templates/layout/page.html.twig
@@ -24,6 +24,13 @@
   {{ page.navbar_branding }}
   {% endblock navbar_branding %}
   <nav class="navigation column">
+    <details>
+      <summary>
+        <div class="burger-icon"><svg aria-label="Navigation Menu" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path d="M0 4h24M0 12h24M0 20h24" stroke="black" stroke-width="2" />
+          </svg></div>
+      </summary>
+
     <div class="columns">
       {% block navbar_social %}
       {% if page.navbar_social %}
@@ -45,6 +52,8 @@
       </div>
       {% endif %}
     </div>
+
+    </details>
   </nav>
 </div>
 {% if is_front %}