fix(explorer): dont invert mobile css, properly toggle .collapsed

Author: jackyzha0

quartz/components/scripts/explorer.inline.ts

@@ -259,15 +259,17 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
   await setupExplorer(currentSlug)
 
   // if mobile hamburger is visible, collapse by default
-  for (const explorer of document.getElementsByClassName("mobile-explorer")) {
-    if (explorer.checkVisibility()) {
+  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")
     }
-  }
 
-  const hiddenUntilDoneLoading = document.querySelector(".mobile-explorer")
-  hiddenUntilDoneLoading?.classList.remove("hide-until-loaded")
+    mobileExplorer.classList.remove("hide-until-loaded")
+  }
 })
 
 function setFolderState(folderElement: HTMLElement, collapsed: boolean) {

quartz/components/styles/explorer.scss

@@ -212,17 +212,17 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
       flex: 0 0 34px;
 
       & > .explorer-content {
-        transform: translateX(0);
-        visibility: visible;
+        transform: translateX(-100vw);
+        visibility: hidden;
       }
     }
 
     &:not(.collapsed) {
       flex: 0 0 34px;
 
       & > .explorer-content {
-        transform: translateX(-100vw);
-        visibility: hidden;
+        transform: translateX(0);
+        visibility: visible;
       }
     }
 
@@ -236,7 +236,7 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
       background-color: var(--light);
       max-width: 100vw;
       width: 100%;
-      transform: translateX(0);
+      transform: translateX(-100vw);
       transition:
         transform 200ms ease,
         visibility 200ms ease;