From 23272666ff7e51416b5f34d93a35cd51f69ce61e Mon Sep 17 00:00:00 2001 From: ruinivist Date: Sun, 29 Mar 2026 10:12:34 +0000 Subject: [PATCH] fix: close navbar on resizing to mobile view --- quartz/components/scripts/explorer.inline.ts | 54 ++++++++++++++------ 1 file changed, 37 insertions(+), 17 deletions(-) diff --git a/quartz/components/scripts/explorer.inline.ts b/quartz/components/scripts/explorer.inline.ts index 168fce2..57ef9be 100644 --- a/quartz/components/scripts/explorer.inline.ts +++ b/quartz/components/scripts/explorer.inline.ts @@ -37,6 +37,39 @@ function toggleExplorer(this: HTMLElement) { } } +function setExplorerCollapsed(explorer: HTMLElement, collapsed: boolean) { + explorer.classList.toggle("collapsed", collapsed) + explorer.setAttribute("aria-expanded", collapsed ? "false" : "true") +} + +function syncExplorerLayout() { + let hasOpenMobileExplorer = false + + for (const explorer of document.getElementsByClassName( + "explorer", + ) as HTMLCollectionOf) { + const mobileExplorer = explorer.querySelector(".mobile-explorer") as MaybeHTMLElement + if (!mobileExplorer) continue + + const isMobile = mobileExplorer.checkVisibility() + const wasMobile = explorer.dataset.mobile === "true" + + if (isMobile && !wasMobile) { + setExplorerCollapsed(explorer, true) + } else if (!isMobile && wasMobile) { + setExplorerCollapsed(explorer, false) + } + + explorer.dataset.mobile = isMobile ? "true" : "false" + + if (isMobile && !explorer.classList.contains("collapsed")) { + hasOpenMobileExplorer = true + } + } + + document.documentElement.classList.toggle("mobile-no-scroll", hasOpenMobileExplorer) +} + function toggleFolder(evt: MouseEvent) { evt.stopPropagation() const target = evt.target as MaybeHTMLElement @@ -279,31 +312,18 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => { const currentSlug = e.detail.url await setupExplorer(currentSlug) - // if mobile hamburger is visible, collapse by default for (const explorer of document.getElementsByClassName("explorer")) { const mobileExplorer = explorer.querySelector(".mobile-explorer") - if (!mobileExplorer) return - - if (mobileExplorer.checkVisibility()) { - explorer.classList.add("collapsed") - explorer.setAttribute("aria-expanded", "false") - - // Allow to be scrollable when mobile explorer is collapsed - document.documentElement.classList.remove("mobile-no-scroll") - } + if (!mobileExplorer) continue mobileExplorer.classList.remove("hide-until-loaded") } + + syncExplorerLayout() }) window.addEventListener("resize", function () { - // Desktop explorer opens by default, and it stays open when the window is resized - // to mobile screen size. Applies `no-scroll` to in this edge case. - const explorer = document.querySelector(".explorer") - if (explorer && !explorer.classList.contains("collapsed")) { - document.documentElement.classList.add("mobile-no-scroll") - return - } + syncExplorerLayout() }) function setFolderState(folderElement: HTMLElement, collapsed: boolean) {