diff --git a/quartz/components/Explorer.tsx b/quartz/components/Explorer.tsx index 346bd75..0bdb5a6 100644 --- a/quartz/components/Explorer.tsx +++ b/quartz/components/Explorer.tsx @@ -95,8 +95,9 @@ export default ((userOpts?: Partial) => {
-
diff --git a/quartz/components/scripts/explorer.inline.ts b/quartz/components/scripts/explorer.inline.ts index 8073979..2b7df7d 100644 --- a/quartz/components/scripts/explorer.inline.ts +++ b/quartz/components/scripts/explorer.inline.ts @@ -3,6 +3,18 @@ import { FolderState } from "../ExplorerNode" // Current state of folders let explorerState: FolderState[] +const observer = new IntersectionObserver((entries) => { + // If last element is observed, remove gradient of "overflow" class so element is visible + const explorer = document.getElementById("explorer-ul") + for (const entry of entries) { + if (entry.isIntersecting) { + explorer?.classList.add("no-background") + } else { + explorer?.classList.remove("no-background") + } + } +}) + function toggleExplorer(this: HTMLElement) { // Toggle collapsed state of entire explorer this.classList.toggle("collapsed") @@ -101,8 +113,10 @@ function setupExplorer() { ) as HTMLElement // Get corresponding content