Add checkbox and style for a mobile “hamburger” menu

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;
 }

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>