diff --git a/quartz/components/scripts/explorer.inline.ts b/quartz/components/scripts/explorer.inline.ts index b431c53..9c83411 100644 --- a/quartz/components/scripts/explorer.inline.ts +++ b/quartz/components/scripts/explorer.inline.ts @@ -23,11 +23,18 @@ let currentExplorerState: Array function toggleExplorer(this: HTMLElement) { const nearestExplorer = this.closest(".explorer") as HTMLElement if (!nearestExplorer) return - nearestExplorer.classList.toggle("collapsed") + const explorerCollapsed = nearestExplorer.classList.toggle("collapsed") nearestExplorer.setAttribute( "aria-expanded", nearestExplorer.getAttribute("aria-expanded") === "true" ? "false" : "true", ) + + if (!explorerCollapsed) { + // Stop from being scrollable when mobile explorer is open + document.documentElement.classList.add("mobile-no-scroll") + } else { + document.documentElement.classList.remove("mobile-no-scroll") + } } function toggleFolder(evt: MouseEvent) { @@ -270,12 +277,25 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => { 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") } mobileExplorer.classList.remove("hide-until-loaded") } }) +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 + } +}) + function setFolderState(folderElement: HTMLElement, collapsed: boolean) { return collapsed ? folderElement.classList.remove("open") : folderElement.classList.add("open") } diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss index 55c4372..002b086 100644 --- a/quartz/components/styles/explorer.scss +++ b/quartz/components/styles/explorer.scss @@ -263,22 +263,8 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg { } } -.no-scroll { - opacity: 0; - overflow: hidden; -} - -html:has(.no-scroll) { - overflow: hidden; -} - -@media all and not ($mobile) { - .no-scroll { - opacity: 1 !important; - overflow: auto !important; - } - - html:has(.no-scroll) { - overflow: auto !important; +.mobile-no-scroll { + @media all and ($mobile) { + overflow: hidden; } }