From c42c56108ebac6673ec5c86f9f0d51f31e8eb2bd Mon Sep 17 00:00:00 2001
From: grm <grm@eyesin.space>
Date: Sat, 19 Sep 2026 00:04:08 +0300
Subject: Remove the menu fold
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 internal/web/templates/layouts/blog.html | 44 ++++++++------------------------
 1 file changed, 10 insertions(+), 34 deletions(-)

(limited to 'internal/web/templates/layouts')

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>
-- 
cgit v1.2.3