fix: bad visibility for last explorer item (#478)

* fix: bad visibility for last explorer item

* feat(explorer): add pseudo element for observer

quartz/components/Explorer.tsx

@@ -95,8 +95,9 @@ export default ((userOpts?: Partial<Options>) => {
           </svg>
         </button>
         <div id="explorer-content">
-          <ul class="overflow">
+          <ul class="overflow" id="explorer-ul">
             <ExplorerNode node={fileTree} opts={opts} fileData={fileData} />
+            <div id="explorer-end" />
           </ul>
         </div>
       </div>

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 <ul> tag and set state
-      const folderUL = folderLi.parentElement?.nextElementSibling as HTMLElement
-      setFolderState(folderUL, folderUl.collapsed)
+      const folderUL = folderLi.parentElement?.nextElementSibling
+      if (folderUL) {
+        setFolderState(folderUL as HTMLElement, folderUl.collapsed)
+      }
     })
   } else {
     // If tree is not in localStorage or config is disabled, use tree passed from Explorer as dataset
@@ -113,6 +127,13 @@ function setupExplorer() {
 window.addEventListener("resize", setupExplorer)
 document.addEventListener("nav", () => {
   setupExplorer()
+
+  const explorerContent = document.getElementById("explorer-ul")
+  // select pseudo element at end of list
+  const lastItem = document.getElementById("explorer-end")
+
+  observer.disconnect()
+  observer.observe(lastItem as Element)
 })
 
 /**

quartz/components/styles/explorer.scss

@@ -131,3 +131,12 @@ div:has(> .folder-outer:not(.open)) > .folder-container > svg {
 .folder-icon:hover {
   color: var(--tertiary);
 }
+
+.no-background::after {
+  background: none !important;
+}
+
+#explorer-end {
+  // needs height so IntersectionObserver gets triggered
+  height: 1px;
+}