From 9306acaec3375f56a483c027ce77797969aea7ec Mon Sep 17 00:00:00 2001
From: jordi fita mas <jordi@tandem.blog>
Date: Mon, 11 Sep 2023 05:43:36 +0200
Subject: [PATCH] =?UTF-8?q?Add=20checkbox=20and=20style=20for=20a=20mobile?=
 =?UTF-8?q?=20=E2=80=9Chamburger=E2=80=9D=20menu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/static/public.css              | 50 +++++++++++++++++++++++++++++-
 web/templates/public/layout.gohtml |  2 ++
 2 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/web/static/public.css b/web/static/public.css
index 6a263cc..58d9e3a 100644
--- a/web/static/public.css
+++ b/web/static/public.css
@@ -208,6 +208,11 @@ h1 a .name {
     width: 50%;
 }
 
+#menuShowHide, label[for="menuShowHide"] {
+    position: absolute;
+    left: -9999em;
+}
+
 nav ul {
     list-style: none;
     padding-left: 0;
@@ -216,7 +221,7 @@ nav ul {
     align-items: center;
 }
 
-nav a, nav button {
+nav a, nav button, label[for="menuShowHide"] {
     font-size: 1.8rem;
     font-weight: 500;
     text-transform: uppercase;
@@ -258,6 +263,49 @@ nav .has-submenu:hover ul, nav .has-submenu:focus-within ul {
     display: flex;
 }
 
+@media (max-width: 48rem) {
+    body > header {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+    }
+
+    label[for="menuShowHide"] {
+        position: static;
+        cursor: pointer;
+        justify-self: end;
+    }
+
+    label[for="menuShowHide"]::before {
+        content: "\2630";
+    }
+
+    nav {
+        display: none;
+        grid-column: 1 / span 2;
+    }
+
+    #menuShowHide:checked ~ nav {
+        display: block;
+    }
+    
+    #menuShowHide:checked ~ label[for="menuShowHide"]::before {
+        content: "✕";
+    }
+    
+    nav ul {
+        flex-direction: column;
+        align-items: start;
+    }
+    
+    nav .has-submenu ul {
+        display: flex;
+        position: static;
+        padding-left: 2rem;
+        margin-top: -1rem;
+        background: none;
+    }
+}
+
 #content {
     padding: 2.5rem;
 }
diff --git a/web/templates/public/layout.gohtml b/web/templates/public/layout.gohtml
index 366ebe5..826931d 100644
--- a/web/templates/public/layout.gohtml
+++ b/web/templates/public/layout.gohtml
@@ -21,6 +21,8 @@
 <a href="#content">{{( gettext "Skip to main content" )}}</a>
 <header>
     <h1><a href="/{{ currentLocale }}/"><span class="logo">◭</span><span class="name">{{( gettext "Campsite Montagut" )}}</span></a></h1>
+    <input type="checkbox" id="menuShowHide">
+    <label for="menuShowHide"></label>
     <nav>
         <ul>
             <li><a href="/{{ currentLocale }}/">{{( pgettext "Home" "title" )}}</a></li>