Add collapsible top menu

assets/css/extended/header.css

@@ -15,15 +15,10 @@ header.header .logo a {
 
 header.header .nav {
   flex-wrap: unset;
-  line-height: 1;
+  line-height: 1.4;
   text-align: center;
 }
 
-header.header #menu {
-  margin-left: 0;
-  overflow-x: unset;
-}
-
 header.header button#theme-toggle {
   font-size: 22px;
   margin: auto 12px;

assets/css/extended/menu.css

@@ -0,0 +1,66 @@
+/*
+ Hamburger menu, adapted from
+ https://github.com/jesse-wei/jessewei.dev-PaperMod/commit/9d74c542e64699557cda562edacacccc700cd3c8
+ */
+
+#menu-trigger {
+  display: none;
+}
+
+.menu {
+  display: flex;
+  margin: auto var(--gap);
+  list-style: none;
+  word-break: keep-all;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+.menu li+li {
+  margin-inline-start: var(--gap);
+}
+
+.menu a {
+  font-size: 16px;
+}
+
+.menu .active {
+  font-weight: 500;
+  border-bottom: 2px solid currentColor;
+}
+
+@media screen and (max-width: 768px) {
+  .menu {
+    list-style: none;
+    position: absolute;
+    right: 0;
+    z-index: 5;
+    padding: var(--gap);
+    background: var(--code-bg);
+    border-radius: var(--radius);
+    border: 2px solid var(--tertiary);
+    line-height: 2.5;
+    margin: calc(var(--header-height) - var(--gap)) var(--gap);
+    display: block;
+  }
+
+  .list .menu {
+    background: var(--entry);
+  }
+
+  .menu li+li {
+    margin-inline-start: 0;
+  }
+
+  #menu-trigger {
+    font-size: 30px;
+    position: relative;
+    display: block;
+    float: right;
+    margin: auto var(--gap);
+  }
+
+  .menu.hidden {
+    display: none;
+  }
+}

config.yml

@@ -16,12 +16,15 @@ menu:
     - name: About
       url: /about/
       weight: 1
+    - name: Posts
+      url: /posts/
+      weight: 2
     - name: Talks
       url: /talks/
-      weight: 2
-    - name: Consult
-      url: /consult/
       weight: 3
+    - name: Consulting
+      url: /consult/
+      weight: 4
 
 params:
   analytics:

layouts/partials/extend_footer.html

@@ -1,10 +1,10 @@
 <div class="mailing-list-container">
   <form
-          class="mailing-list"
-          action="https://yanirseroussi.us17.list-manage.com/subscribe/post?u=3c08aa3ff27dd92978019febd&amp;id=bc3ab705af"
-          method="post"
-          target="_blank"
-          novalidate
+      class="mailing-list"
+      action="https://yanirseroussi.us17.list-manage.com/subscribe/post?u=3c08aa3ff27dd92978019febd&amp;id=bc3ab705af"
+      method="post"
+      target="_blank"
+      novalidate
   >
     <label for="mailing-list-email">Get new posts in your mailbox</label>
     <input type="text" name="EMAIL" id="mailing-list-email" placeholder="Email address" />
@@ -27,3 +27,17 @@
     </span>
   </div>
 </div>
+
+<script>
+  const menuTrigger = document.querySelector("#menu-trigger");
+  const menuElem = document.querySelector(".menu");
+  menuTrigger.addEventListener("click", function () {
+    menuElem.classList.toggle("hidden");
+  });
+  // hide menu when clicked outside
+  document.body.addEventListener('click', function (event) {
+    if (!menuTrigger.contains(event.target)) {
+      menuElem.classList.add("hidden");
+    }
+  });
+</script>

layouts/partials/header.html

@@ -120,7 +120,14 @@
             </div>
         </div>
         {{- $currentPage := . }}
-        <ul id="menu">
+        <button id="menu-trigger" aria-haspopup="menu" aria-label="Menu Button">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
+                <line x1="3" y1="12" x2="21" y2="12"></line>
+                <line x1="3" y1="6" x2="21" y2="6"></line>
+                <line x1="3" y1="18" x2="21" y2="18"></line>
+            </svg>
+        </button>
+        <ul class="menu hidden">
             {{- range site.Menus.main }}
             {{- $menu_item_url := (cond (strings.HasSuffix .URL "/") .URL (printf "%s/" .URL) ) | absLangURL }}
             {{- $page_url:= $currentPage.Permalink | absLangURL }}
@@ -144,7 +151,6 @@
                 </a>
             </li>
             {{- end }}
-            <!-- Hack to work around limitation with linking to #/ and opening in a new tab. -->
         </ul>
     </nav>
 </header>