quartz
Code Issues

fix: close navbar on resizing to mobile view

Browse Source
This commit is contained in:
ruinivist
2026-03-29 10:12:34 +00:00
parent f30e943126
commit 23272666ff
1 changed files with 37 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
quartz/components/scripts/explorer.inline.ts
+37 -17
View File
@@ -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<HTMLElement>) {
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) { function toggleFolder(evt: MouseEvent) {
evt.stopPropagation() evt.stopPropagation()
const target = evt.target as MaybeHTMLElement const target = evt.target as MaybeHTMLElement
@@ -279,31 +312,18 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
const currentSlug = e.detail.url const currentSlug = e.detail.url
await setupExplorer(currentSlug) await setupExplorer(currentSlug)
// if mobile hamburger is visible, collapse by default
for (const explorer of document.getElementsByClassName("explorer")) { for (const explorer of document.getElementsByClassName("explorer")) {
const mobileExplorer = explorer.querySelector(".mobile-explorer") const mobileExplorer = explorer.querySelector(".mobile-explorer")
if (!mobileExplorer) return if (!mobileExplorer) continue
if (mobileExplorer.checkVisibility()) {
explorer.classList.add("collapsed")
explorer.setAttribute("aria-expanded", "false")
// Allow <html> to be scrollable when mobile explorer is collapsed
document.documentElement.classList.remove("mobile-no-scroll")
}
mobileExplorer.classList.remove("hide-until-loaded") mobileExplorer.classList.remove("hide-until-loaded")
} }
syncExplorerLayout()
}) })
window.addEventListener("resize", function () { window.addEventListener("resize", function () {
// Desktop explorer opens by default, and it stays open when the window is resized syncExplorerLayout()
// to mobile screen size. Applies `no-scroll` to <html> in this edge case.
const explorer = document.querySelector(".explorer")
if (explorer && !explorer.classList.contains("collapsed")) {
document.documentElement.classList.add("mobile-no-scroll")
return
}
}) })
function setFolderState(folderElement: HTMLElement, collapsed: boolean) { function setFolderState(folderElement: HTMLElement, collapsed: boolean) {