fix(explorer): mobile explorer toggle (#1823)

quartz/components/scripts/explorer.inline.ts

@@ -266,7 +266,7 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
     }
   }
 
-  const hiddenUntilDoneLoading = document.querySelector("#mobile-explorer")
+  const hiddenUntilDoneLoading = document.querySelector(".mobile-explorer")
   hiddenUntilDoneLoading?.classList.remove("hide-until-loaded")
 })
 

quartz/components/styles/explorer.scss

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