Add non-JS hamburger menu

Fixes #17.

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fwdekker/template",
-    "version": "2.0.1",
+    "version": "2.1.0",
     "description": "The base template for pages on fwdekker.com.",
     "author": "Felix W. Dekker",
     "license": "MIT",

src/main/css/snippets/nav.css

@@ -1,3 +1,4 @@
+/* Base elements */
 nav {
     margin: 0;
     width: 100%;
@@ -13,16 +14,23 @@ nav * {
     vertical-align: middle;
 }
 
-nav a, nav a:link, nav a:visited, nav a:hover, nav a:active {
+nav a, nav a:link, nav a:visited, nav a:hover, nav a:active, nav #nav-hamburger-label {
     display: inline-block;
     margin: 0;
     padding: calc(var(--padding)) calc(var(--padding));
-    width: 100%;
+    height: 100%;
 
     color: white;
 }
 
+nav #nav-hamburger-label {
+    float: right;
+    font-size: unset;
+    cursor: pointer;
+}
 
+
+/* Logo */
 nav .logo {
     width: calc(1em + var(--padding));
     height: calc(1em + var(--padding));
@@ -30,12 +38,14 @@ nav .logo {
     vertical-align: middle;
     filter: brightness(0) invert(1);
 }
+
 nav div.logo {
     display: inline-block;
     margin-right: calc(1em / 3);
 }
 
 
+/* First level nesting */
 nav ul {
     margin: 0;
     padding: 0;
@@ -53,7 +63,9 @@ nav ul li {
 }
 
 nav ul li:hover,
-nav ul li:focus-within {
+nav ul li:focus-within,
+nav #nav-hamburger-label:hover,
+nav #nav-hamburger-label:focus-within {
     cursor: pointer;
     background-color: var(--fwdekker-theme-color-very-dark);
 }
@@ -63,6 +75,7 @@ nav li.currentPage {
 }
 
 
+/* Second level nesting */
 nav ul li ul {
     display: none;
     position: absolute;
@@ -85,3 +98,21 @@ nav ul li ul li {
     width: 100%;
     white-space: nowrap;
 }
+
+
+/* Hide hamburger-related elements */
+nav input[type="checkbox"] {
+    display: none;
+}
+
+@media (min-width: 600px) {
+    nav #nav-hamburger-label {
+        display: none;
+    }
+}
+
+@media (max-width: 600px) {
+    nav input[type="checkbox"]:not(:checked) ~ ul li:not(:first-child) {
+        display: none;
+    }
+}

src/main/js/main.js

@@ -68,7 +68,13 @@ const nav = function(highlightPath = "") {
             return [];
         });
 
-    const nav = stringToHtml(`<nav></nav>`, "nav");
+    const nav = stringToHtml(
+        `<nav>` +
+        `<input id="nav-hamburger-checkbox" type="checkbox" hidden />` +
+        `<label id="nav-hamburger-label" for="nav-hamburger-checkbox">&#9776;</label>` +
+        `</nav>`,
+        "nav"
+    );
     nav.appendChild(base);
     return nav;
 };