From 63f9fdff6e5bdf6333a4b7813ebeb5b797838b6d Mon Sep 17 00:00:00 2001 From: grm Date: Fri, 18 Sep 2026 19:29:30 +0300 Subject: Fold the header menu into a button when its links do not fit MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 Claude-Session: https://claude.ai/code/session_01Sd8UPWrvyYCLj97JexNw3A --- internal/web/templates/layouts/blog.html | 46 +++++++++++++++++++++++++------- 1 file changed, 37 insertions(+), 9 deletions(-) (limited to 'internal/web/templates/layouts') diff --git a/internal/web/templates/layouts/blog.html b/internal/web/templates/layouts/blog.html index 7ee0b54..d55512a 100644 --- a/internal/web/templates/layouts/blog.html +++ b/internal/web/templates/layouts/blog.html @@ -13,10 +13,7 @@ {{$l := .Data.layout}} -{{if or $l.Header .Data.theme.HeaderImage}}{{if .Data.theme.HeaderOn}}
- {{if .Data.theme.HeaderImage}}
{{end}} - {{range $l.Header}}{{template "module" (dict "m" . "root" $)}}{{end}} -
{{end}}{{end}} +{{if or $l.Header .Data.theme.HeaderImage}}{{if .Data.theme.HeaderOn}}{{template "siteheader" .}}{{end}}{{end}}
{{$n := .Data.notices}}
@@ -43,6 +40,37 @@ {{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}}
+ {{if $l.Fold}}{{end}} + {{if $t.HeaderImage}}
{{end}} + {{range $i, $m := $l.Header}}{{template "module" (dict "m" $m "root" $ "burger" (and $l.Fold (eq $i $l.BurgerAt)))}}{{end}} +
{{if $l.Fold}}{{end}}{{end}} + +{{/* The fold button, a label for the checkbox above. */}} +{{define "burger"}}{{end}} + {{define "notices"}}{{if .}}
{{range .}}