Fold the header menu into a button when its links do not fit

A long menu wrapped onto two or three lines on phones and narrow
windows. With the new Design switch the header menu folds into a ☰
button (an icon, the word Menu, or both) carried by the title or logo
block just above it, at the right end of its row, or by the menu bar
when nothing is above it; the button opens the links as a stacked list
with the search box on top.

The open/closed state is a hidden checkbox and the button its label,
so opening needs no script and works in old browsers. Whether to fold
is decided by a small inline script — any link on a second line means
the menu does not fit — re-checked on resize; without it blog.css folds
on phones only, and browsers too old for that keep the wrapping menu.

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

1 files changed, 18 insertions, 2 deletions

diff --git a/AGENTS.md b/AGENTS.md
index 4628a5a..00a29f8 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -225,7 +225,8 @@ internal/web/         server.go (host router, middleware, render helpers)
   unscoped (a column menu's block links centre their text, as before). They replaced a `nav_style` select
   (`normal` | `uppercase` | `plain`), which `ParseTheme` still decodes and maps
   onto the switches — `uppercase` was also the small size — (`omitempty`, so
-  the next save drops it). `TitleRule` (`none` | `line` | `dots` | `dots2` | `stripes`) is the header
+  the next save drops it). `NavFold` folds the header menu into a button
+  (`NavFoldLabel`: `icon` | `text` | `both`), see Layout. `TitleRule` (`none` | `line` | `dots` | `dots2` | `stripes`) is the header
   rule's kinds, plus a double dotted row (`dots2`: the border and an
   absolutely positioned `::after` with a second one 2px above), under page and post titles (`.page-title`, `.post-title`): a body
   class from `Theme.TitleRuleClass` (`titles-<kind>`) that blog.css draws
@@ -296,7 +297,22 @@ internal/web/         server.go (host router, middleware, render helpers)
   browsers without `min()` — wide screens only, backgrounds untouched);
   below 700px `.cols` becomes block flow so the order is main → left →
   right → footer. Everything is rendered by the `module` template in
-  `layouts/blog.html`. New blogs get `insertDefaultModules` (title + menu
+  `layouts/blog.html`; the header by `siteheader` (the banner, then the
+  modules). **Menu fold** (`theme.nav_fold`, `Layout.Fold`/`BurgerAt` from
+  `buildLayout`): the header menu turns into a button when its links do not
+  fit. The button (`burger` template, a `<label>`) is carried by the title or
+  logo block just before the menu (`.has-burger`, the label absolutely
+  positioned at the block's right — `header-center` pads the other side so
+  the brand stays centred) or by the menu bar itself; a logo module without a
+  logo renders nothing, so it cannot host it. A hidden, focusable checkbox
+  (`#nav-toggle`) comes first in `.site-header` and is the open/closed state,
+  so `:checked ~` reaches both blocks and no script is needed to open the
+  stacked panel (links block-level, the search box on top). Folding itself:
+  the inline script after the header (guarded; old browsers skip it) drops
+  `.nav-auto` — the no-script fallback blog.css folds under 700px — and sets
+  `.nav-folded` whenever a link's `offsetTop` differs from the first's, i.e.
+  the row wrapped; re-run on `load` and `resize`. The `.nav-folded` and
+  `@media … .nav-auto` rule blocks in blog.css must stay identical. New blogs get `insertDefaultModules` (title + menu
   in the header, RSS in the footer) — keep it in step with the layout
   migration's defaults.
 - **Menu** (`menu_items` table, `store/menu.go`): the single ordered list