Remove the menu fold

The header menu no longer folds into a ☰ button: the nav_fold and
nav_fold_label options, Layout.Fold/BurgerAt, the burger markup and its
checkbox, the fold rules in blog.css and the measuring script on the
public page are gone, and the Design tab's preview only sizes its frame
again. The public page runs no script of its own once more.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Sd8UPWrvyYCLj97JexNw3A

2 files changed, 14 insertions, 56 deletions

diff --git a/internal/web/templates/dashboard/design.html b/internal/web/templates/dashboard/design.html
index 039eabe..1af90c4 100644
--- a/internal/web/templates/dashboard/design.html
+++ b/internal/web/templates/dashboard/design.html
@@ -158,7 +158,7 @@
   <div class="navpreview jsonly">
     <p class="muted small">{{t "Preview"}}: <button type="button" class="mini" data-pv="wide" aria-pressed="true">{{t "Wide screen"}}</button> <button type="button" class="mini" data-pv="phone" aria-pressed="false">{{t "Phone"}}</button> <span class="pvstatus"></span></p>
     <iframe class="navpreview-frame" sandbox="allow-same-origin" scrolling="no" title="{{t "Preview"}}"></iframe>
-    <p class="muted small">{{t "Your header with the menu as set here; the phone view shows the folded menu. Nothing is saved until you press Save."}}</p>
+    <p class="muted small">{{t "Your header with the menu as set here, on a wide screen or a phone. Nothing is saved until you press Save."}}</p>
   </div>
   <div class="row">
     <label>{{t "Alignment"}} <span class="muted">({{t "menu in the header"}})</span><br><select name="nav_align">
@@ -198,17 +198,6 @@
     <label for="nav-hover-custom" class="check">{{t "Change colour when the mouse is over a link"}}</label>
     <label class="hover-color">{{t "Hover colour"}}<br><input type="color" name="nav_hover" value="{{if $t.NavHover}}{{$t.NavHover}}{{else}}{{$t.NavText}}{{end}}"></label>
   </div>
-  <h3>{{t "When the menu does not fit"}}</h3>
-  <div class="hoverpick">
-    <input type="checkbox" name="nav_fold" id="nav-fold"{{if $t.NavFold}} checked{{end}}>
-    <label for="nav-fold" class="check">{{t "Fold the header menu into a button when its links do not fit on one line"}}</label>
-    <label class="hover-color">{{t "Button"}}<br><select name="nav_fold_label">
-      <option value="icon"{{if eq $t.NavFoldLabel "icon"}} selected{{end}}>&#9776;</option>
-      <option value="text"{{if eq $t.NavFoldLabel "text"}} selected{{end}}>{{t "Menu"}}</option>
-      <option value="both"{{if eq $t.NavFoldLabel "both"}} selected{{end}}>&#9776; {{t "Menu"}}</option>
-    </select></label>
-  </div>
-  <p class="muted small">{{t "The button sits at the right of the title or logo just above the menu, or in the menu bar itself when nothing is above it, and opens the links as a list. Readers whose browser runs no scripts get it on phones."}}</p>
 </div>
 
 <div class="card" id="content">
@@ -380,18 +369,11 @@
       .then(function () { pvBusy = false; if (pvAgain) { pvAgain = false; preview(); } });
   }
   function schedule() { clearTimeout(pvTimer); pvTimer = setTimeout(preview, 300); }
-  function fitFrame() { // the frame runs no scripts, so fold the menu the way the blog's own script does, and size the frame to the header
-    try {
-      var d = frame.contentDocument, h = d.querySelector(".site-header.nav-fold"), links = h ? h.querySelectorAll(".site-nav .nav-inner a") : [];
-      if (links.length) {
-        h.classList.remove("nav-auto"); h.classList.remove("nav-folded");
-        for (var i = 1; i < links.length; i++) if (links[i].offsetTop !== links[0].offsetTop) { h.classList.add("nav-folded"); break; }
-      }
-      frame.style.height = d.body.scrollHeight + "px";
-    } catch (e) {}
+  function fitFrame() { // the frame is as tall as the header
+    try { frame.style.height = frame.contentDocument.body.scrollHeight + "px"; } catch (e) {}
   }
   if (frame) {
-    frame.addEventListener("load", function () { fitFrame(); try { frame.contentDocument.addEventListener("change", fitFrame); } catch (e) {} }); // change: the fold button opened or closed the panel
+    frame.addEventListener("load", fitFrame);
     qa("[data-pv]").forEach(function (b) { b.addEventListener("click", function () {
       frame.classList.toggle("phone", b.getAttribute("data-pv") === "phone");
       qa("[data-pv]").forEach(function (o) { o.setAttribute("aria-pressed", String(o === b)); });
diff --git a/internal/web/templates/layouts/blog.html b/internal/web/templates/layouts/blog.html
index 71a62b0..99bb13a 100644
--- a/internal/web/templates/layouts/blog.html
+++ b/internal/web/templates/layouts/blog.html
@@ -40,36 +40,12 @@
 </body>
 </html>{{end}}
 
-{{/* The header: the banner, then its modules in order. With the menu folding
-     (Layout.Fold) a hidden checkbox comes first: it is the open/closed state,
-     so the burger label toggles the menu with no script and in old browsers
-     (`:checked ~` reaches every block after it). Folding itself is decided by
-     the script below — any link on a second line means the menu does not fit —
-     which drops nav-auto, the no-script fallback blog.css folds on phones. */}}
-{{define "siteheader"}}{{$l := .Data.layout}}{{$t := .Data.theme}}<div class="site-header{{if $l.Fold}} nav-fold nav-auto{{end}}{{if eq $t.HeaderAlign "center"}} header-center{{end}}">
-  {{if $l.Fold}}<input type="checkbox" id="nav-toggle" class="nav-toggle" aria-label="{{t "Menu"}}">{{end}}
+{{/* The header: the banner, then its modules in order. On its own so the
+     design page's preview can render it alone. */}}
+{{define "siteheader"}}{{$t := .Data.theme}}<div class="site-header">
   {{if $t.HeaderImage}}<div class="header-image"><a href="/"><img src="{{$.Media}}/{{$t.HeaderImage}}" alt=""></a></div>{{end}}
-  {{range $i, $m := $l.Header}}{{template "module" (dict "m" $m "root" $ "burger" (and $l.Fold (eq $i $l.BurgerAt)))}}{{end}}
-</div>{{if $l.Fold}}<script>(function () {
-  var h = document.querySelector && document.querySelector(".site-header.nav-fold"), cb = document.getElementById("nav-toggle");
-  if (!h || !h.classList || !window.addEventListener) return; // old browsers keep the phone-only fallback
-  var nav = h.querySelector(".site-nav .nav-inner"), links = nav && nav.getElementsByTagName("a"), timer;
-  if (!links || !links.length) return;
-  h.classList.remove("nav-auto");
-  function fit() { // unfold, look, refold before anything is painted
-    h.classList.remove("nav-folded");
-    var top = links[0].offsetTop, wrapped = false;
-    for (var i = 1; i < links.length && !wrapped; i++) wrapped = links[i].offsetTop !== top;
-    if (wrapped) h.classList.add("nav-folded");
-  }
-  fit();
-  window.addEventListener("load", fit); // web fonts change the widths
-  window.addEventListener("resize", function () { clearTimeout(timer); timer = setTimeout(fit, 100); });
-  if (cb) cb.addEventListener("change", function () { cb.setAttribute("aria-expanded", cb.checked ? "true" : "false"); });
-})();</script>{{end}}{{end}}
-
-{{/* The fold button, a label for the checkbox above. */}}
-{{define "burger"}}<label for="nav-toggle" class="nav-burger burger-{{.NavFoldLabel}}"><span class="nb-icon" aria-hidden="true">&#9776;</span><span class="nb-text">{{t "Menu"}}</span></label>{{end}}
+  {{range .Data.layout.Header}}{{template "module" (dict "m" . "root" $)}}{{end}}
+</div>{{end}}
 
 {{define "notices"}}{{if .}}<div class="notices">
 {{range .}}<aside class="notice notice-{{.Style}}{{if .Title}} headed{{end}}{{if .Width}} w-{{.Width}}{{end}}">
@@ -81,14 +57,14 @@
 
 {{/* One layout module. .m is the store.Module, .root the page data; the same
      kind renders differently in the header (big blocks) and elsewhere (boxes). */}}
-{{define "module"}}{{$m := .m}}{{$r := .root}}{{$t := $r.Data.theme}}{{$rc := $t.RuleClass}}{{$b := .burger}}
-{{- if eq $m.Kind "title"}}<div class="wrap header-text{{with $rc}} {{.}}{{end}}{{if $b}} has-burger{{end}}">{{template "rule" (dict "before" true "rc" $rc "theme" $t)}}<div class="brand">
+{{define "module"}}{{$m := .m}}{{$r := .root}}{{$t := $r.Data.theme}}{{$rc := $t.RuleClass}}
+{{- if eq $m.Kind "title"}}<div class="wrap header-text{{with $rc}} {{.}}{{end}}">{{template "rule" (dict "before" true "rc" $rc "theme" $t)}}<div class="brand">
   <h1 class="site-title"><a href="/">{{$r.Blog.Title}}</a></h1>
   {{if $r.Blog.Tagline}}<p class="tagline">{{$r.Blog.Tagline}}</p>{{end}}
-</div>{{template "rule" (dict "before" false "rc" $rc "theme" $t)}}{{if $b}}{{template "burger" $t}}{{end}}</div>
-{{- else if eq $m.Kind "logo"}}{{if $t.Logo}}{{if eq $m.Area "header"}}<div class="wrap header-logo{{with $rc}} {{.}}{{end}}{{if $b}} has-burger{{end}}">{{template "rule" (dict "before" true "rc" $rc "theme" $t)}}<div class="brand"><a href="/"><img class="logo" src="{{$r.Media}}/{{$t.Logo}}" alt="{{$r.Blog.Title}}"></a></div>{{template "rule" (dict "before" false "rc" $rc "theme" $t)}}{{if $b}}{{template "burger" $t}}{{end}}</div>
+</div>{{template "rule" (dict "before" false "rc" $rc "theme" $t)}}</div>
+{{- else if eq $m.Kind "logo"}}{{if $t.Logo}}{{if eq $m.Area "header"}}<div class="wrap header-logo{{with $rc}} {{.}}{{end}}">{{template "rule" (dict "before" true "rc" $rc "theme" $t)}}<div class="brand"><a href="/"><img class="logo" src="{{$r.Media}}/{{$t.Logo}}" alt="{{$r.Blog.Title}}"></a></div>{{template "rule" (dict "before" false "rc" $rc "theme" $t)}}</div>
 {{else}}<div class="mod mod-logo"><a href="/"><img class="logo" src="{{$r.Media}}/{{$t.Logo}}" alt="{{$r.Blog.Title}}"></a></div>{{end}}{{end}}
-{{- else if eq $m.Kind "menu"}}{{if eq $m.Area "header"}}<div class="site-nav{{if $b}} has-burger{{end}}"><div class="wrap nav-inner">{{if $b}}{{template "burger" $t}}{{end}}{{if $r.Data.layout.HeaderSearch}}{{template "searchform" $r}}{{end}}{{template "menulinks" $r}}</div></div>
+{{- else if eq $m.Kind "menu"}}{{if eq $m.Area "header"}}<div class="site-nav"><div class="wrap nav-inner">{{if $r.Data.layout.HeaderSearch}}{{template "searchform" $r}}{{end}}{{template "menulinks" $r}}</div></div>
 {{else}}<div class="mod site-nav mod-menu">{{template "modtitle" $m}}<div class="nav-inner">{{template "menulinks" $r}}</div></div>{{end}}
 {{- else if eq $m.Kind "recent"}}<div class="mod mod-recent">{{template "modtitle" $m}}
   <ul>{{range $i, $p := $r.Data.recent}}{{if lt $i $m.Count}}<li><a href="/{{$p.PageSlug}}/{{$p.Slug}}">{{$p.Title}}</a></li>{{end}}{{end}}</ul>