fix: close navbar on resizing to mobile view

2026-03-29 10:12:34 +00:00
parent f30e943126
commit 23272666ff
1 changed files with 37 additions and 17 deletions
@@ -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) {
  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 <html> 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 <html> 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) {