Flip expanded menu theme at the text's leading edge, not panel midpoint

The mobile menu links are top-anchored, so the panel's vertical midpoint sits
well below them. Triggering the light/dark flip at that midpoint meant the dark
boundary had already risen past the text before the switch fired. Probe the
lowest link's bottom edge instead so the fade lands as the boundary reaches the
text — matching how the thin nav bar flips at its own content.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-17 11:09:38 -07:00
parent fcfbfd8817
commit 1f2e84658d
+10 -2
View File
@@ -266,8 +266,16 @@
var nr = nav.getBoundingClientRect(); var nr = nav.getBoundingClientRect();
nav.classList.toggle('on-dark', darkBehind((nr.top + nr.bottom) / 2)); nav.classList.toggle('on-dark', darkBehind((nr.top + nr.bottom) / 2));
if (menu && menu.classList.contains('open')) { if (menu && menu.classList.contains('open')) {
var mr = menu.getBoundingClientRect(); // Flip the menu when the dark boundary reaches its TEXT — the lowest link's
menu.classList.toggle('on-dark', darkBehind((mr.top + mr.bottom) / 2)); // leading edge — not the panel's midpoint. The links are top-anchored, so the
// midpoint sits well below them: by the time dark reached it, the text had
// already been over dark. Probing the lowest link makes the switch land as the
// boundary enters the text, just like the (thin) nav bar flips at its content.
var links = menu.querySelectorAll('a');
var probe = links.length
? links[links.length - 1].getBoundingClientRect().bottom
: (function () { var mr = menu.getBoundingClientRect(); return (mr.top + mr.bottom) / 2; })();
menu.classList.toggle('on-dark', darkBehind(probe));
} }
} }
updateNavTheme(); updateNavTheme();