Skip to content

Commit 1498944

Browse files
committed
fixes
1 parent d20d33f commit 1498944

File tree

2 files changed

+52
-16
lines changed

2 files changed

+52
-16
lines changed

blocks/header/header.css

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ header nav[aria-expanded='true'] {
8181
grid-template:
8282
'hamburger brand tools' var(--nav-height)
8383
'sections sections sections' 1fr / auto 1fr auto;
84-
overflow-y: auto;
84+
overflow: hidden;
8585
min-height: 100dvh;
8686
}
8787

@@ -240,6 +240,15 @@ header nav .nav-sections ul {
240240
}
241241

242242
@media (width <= 899px) {
243+
header nav .nav-sections {
244+
overflow-y: auto;
245+
-webkit-overflow-scrolling: touch;
246+
}
247+
248+
header nav[aria-expanded='true'] .nav-sections {
249+
max-height: calc(var(--nav-open-height, 100dvh) - var(--nav-height));
250+
}
251+
243252
header nav .nav-sections ul,
244253
header nav .nav-sections .default-content-wrapper > ul > li,
245254
header nav .nav-sections .default-content-wrapper > ul > li > ul {

blocks/header/header.js

Lines changed: 42 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -315,19 +315,24 @@ async function initAuth(nav, tools) {
315315
}
316316
if (mobileLink && !mobileLink.classList.contains('button')) mobileLink.classList.add('button');
317317

318-
const authState = await resolveAuthState();
319-
const loggedIn = authState.authenticated;
320-
const loginHref = getLoginUrl();
321-
const logoutHref = getLogoutUrl();
322-
const targetHref = loggedIn ? logoutHref : loginHref;
323-
const label = loggedIn ? logoutLabel : loginLabel;
324-
325-
[desktopLink, mobileLink].filter(Boolean).forEach((link) => {
326-
link.setAttribute('href', targetHref);
327-
link.textContent = label;
328-
link.setAttribute('aria-label', label);
329-
setAuthUserInfo(link, loggedIn ? authState.email : '');
330-
});
318+
const applyAuthState = async () => {
319+
const authState = await resolveAuthState();
320+
const loggedIn = authState.authenticated;
321+
const loginHref = getLoginUrl();
322+
const logoutHref = getLogoutUrl();
323+
const targetHref = loggedIn ? logoutHref : loginHref;
324+
const label = loggedIn ? logoutLabel : loginLabel;
325+
326+
[desktopLink, mobileLink].filter(Boolean).forEach((link) => {
327+
link.setAttribute('href', targetHref);
328+
link.textContent = label;
329+
link.setAttribute('aria-label', label);
330+
setAuthUserInfo(link, loggedIn ? authState.email : '');
331+
});
332+
};
333+
334+
await applyAuthState();
335+
return applyAuthState;
331336
}
332337

333338
function ensureGoogleTranslateScript() {
@@ -454,6 +459,14 @@ function toggleMobile(nav, open, body) {
454459
nav.querySelectorAll('.nav-drop').forEach((d) => d.setAttribute('tabindex', DESKTOP.matches ? '0' : '-1'));
455460
}
456461

462+
function syncMobileNavHeight(nav) {
463+
if (DESKTOP.matches) {
464+
nav.style.removeProperty('--nav-open-height');
465+
return;
466+
}
467+
nav.style.setProperty('--nav-open-height', `${window.innerHeight}px`);
468+
}
469+
457470
const NAV_ITEMS = '.default-content-wrapper > ul > li';
458471

459472
export default async function decorate(block) {
@@ -507,7 +520,11 @@ export default async function decorate(block) {
507520
const hamburger = document.createElement('div');
508521
hamburger.className = 'nav-hamburger';
509522
hamburger.innerHTML = '<button type="button" aria-controls="nav" aria-label="Open navigation"><span class="nav-hamburger-icon"></span></button>';
510-
hamburger.onclick = () => toggleMobile(nav, undefined, body);
523+
let refreshAuthState = null;
524+
hamburger.onclick = async () => {
525+
toggleMobile(nav, undefined, body);
526+
if (nav.getAttribute('aria-expanded') === 'true') await refreshAuthState?.();
527+
};
511528

512529
eventRoot.addEventListener('click', (e) => {
513530
if (!DESKTOP.matches && nav.getAttribute('aria-expanded') === 'true' && !nav.contains(e.target)) {
@@ -530,13 +547,23 @@ export default async function decorate(block) {
530547
block.append(wrapper);
531548

532549
toggleMobile(nav, false, body);
550+
syncMobileNavHeight(nav);
533551
collapseAll(nav);
534552
DESKTOP.addEventListener('change', () => toggleMobile(nav, false, body));
553+
window.addEventListener('resize', () => {
554+
syncMobileNavHeight(nav);
555+
});
535556

536557
if (tools) {
537558
initTheme(tools);
538559
initSearch(tools);
539-
await initAuth(nav, tools);
560+
refreshAuthState = await initAuth(nav, tools);
561+
window.addEventListener('pageshow', () => { refreshAuthState?.(); });
562+
if (eventRoot === document) {
563+
document.addEventListener('visibilitychange', () => {
564+
if (!document.hidden) refreshAuthState?.();
565+
});
566+
}
540567
initLanguage(tools, eventRoot);
541568
hydrateTranslateFromCookie();
542569
}

0 commit comments

Comments
 (0)