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, 0 deletions

diff --git a/internal/web/layout.go b/internal/web/layout.go
index 91728ed..d201758 100644
--- a/internal/web/layout.go
+++ b/internal/web/layout.go
@@ -130,6 +130,12 @@ type Layout struct {
 	// A header search box sits in the menu row when there is one, so the two
 	// header modules need to know about each other.
 	HeaderMenu, HeaderSearch bool
+	// Fold says the header menu folds into a button (theme nav_fold, and a
+	// menu in the header); BurgerAt is the index in Header of the module that
+	// carries the button: the title or logo block just before the menu, so it
+	// sits at the right of the brand, else the menu bar itself.
+	Fold     bool
+	BurgerAt int
 }
 
 // buildLayout groups modules by area, dropping areas the theme has switched off.
@@ -156,6 +162,18 @@ func buildLayout(t Theme, mods []store.Module) Layout {
 			l.Footer = append(l.Footer, m)
 		}
 	}
+	if t.NavFold {
+		for j, m := range l.Header {
+			if m.Kind != "menu" {
+				continue
+			}
+			l.Fold, l.BurgerAt = true, j
+			if j > 0 && (l.Header[j-1].Kind == "title" || l.Header[j-1].Kind == "logo" && t.Logo != "") { // a logo module without a logo renders nothing
+				l.BurgerAt = j - 1
+			}
+			break
+		}
+	}
 	l.HasLeft = t.KeepColumns || len(l.Left) > 0
 	l.HasRight = t.KeepColumns || len(l.Right) > 0
 	return l