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:
+10
-2
@@ -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();
|
||||||
|
|||||||
Reference in New Issue
Block a user