Slide in + no ugly onload animation on mobile

quartz/components/Explorer.tsx

@@ -88,7 +88,7 @@ export default ((userOpts?: Partial<Options>) => {
         <button
           type="button"
           id="mobile-explorer"
-          class="collapsed"
+          class="collapsed hide-until-loaded"
           data-behavior={opts.folderClickBehavior}
           data-collapsed={opts.folderDefaultState}
           data-savestate={opts.useSavedState}

quartz/components/scripts/explorer.inline.ts

@@ -40,18 +40,7 @@ function toggleExplorer(this: HTMLElement) {
   if (document.querySelector("#mobile-explorer")) {
     // Disable scrolling one the page when the explorer is opened on mobile
     const bodySelector = document.querySelector("#quartz-body")
-    if (bodySelector) {
-      if (!bodySelector.classList.contains("lock-scroll")) {
-        bodySelector.setAttribute("scroll-position", `${window.scrollY}`)
-        bodySelector.classList.toggle("lock-scroll")
-      } else {
-        bodySelector.classList.toggle("lock-scroll")
-        window.scrollTo({
-          top: Number(bodySelector.getAttribute("scroll-position")),
-          behavior: "instant",
-        })
-      }
-    }
+    if (bodySelector) bodySelector.classList.toggle("lock-scroll")
   }
 }
 
@@ -195,6 +184,10 @@ document.addEventListener("nav", () => {
     observer.observe(lastItem)
   }
 
+  // Hide explorer on mobile until it is requested
+  const hiddenUntilDoneLoading = document.querySelector("#mobile-explorer")
+  hiddenUntilDoneLoading?.classList.remove("hide-until-loaded")
+
   toggleExplorerFolders()
 })
 

quartz/components/styles/explorer.scss

@@ -1,11 +1,29 @@
 @use "../../styles/variables.scss" as *;
 
-// Sticky top bar (stays in place when scrolling down on mobile.
 @media all and ($mobile) {
-  .page > #quartz-body .sidebar.left:has(.explorer) {
-    box-sizing: border-box;
-    position: sticky;
-    background-color: var(--light);
+  .page > #quartz-body {
+    // Move page on mobile
+    & > :not(.sidebar.left:has(.explorer)) {
+      transform: translateX(0);
+      transition: transform 300ms ease-in-out;
+    }
+    &.lock-scroll > :not(.sidebar.left:has(.explorer)) {
+      transform: translateX(100dvw);
+      //width: 100%;
+      transition: transform 300ms ease-in-out;
+    }
+
+    // Sticky top bar (stays in place when scrolling down on mobile.
+    .sidebar.left:has(.explorer) {
+      box-sizing: border-box;
+      position: sticky;
+      background-color: var(--light);
+    }
+
+    // Hide until done loading
+    .hide-until-loaded ~ #explorer-content {
+      display: none;
+    }
   }
 }
 
@@ -229,19 +247,20 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
       position: absolute;
       background-color: var(--light);
       max-width: 100dvw;
-      //left: -100dvw;
-      transform: translateX(-100dvw);
+      left: -100dvw;
+      //transform: translateX(0);
       width: 100%;
-      transition: all 300ms ease-in-out;
+      transition: transform 300ms ease-in-out;
       overflow: hidden;
-      padding: 2rem 2rem 4rem;
+      padding: 2rem;
       height: calc(100dvh - 4rem);
       max-height: calc(100dvh - 4rem);
       margin-top: 2rem;
-      visibility: visible;
+      visibility: hidden;
 
       &:not(.collapsed) {
-        transform: translateX(0);
+        transform: translateX(100dvw);
+        visibility: visible;
       }
 
       ul.overflow {
@@ -250,7 +269,7 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
       }
 
       &.collapsed {
-        transform: translateX(-100dvw);
+        transform: translateX(0);
         visibility: visible;
       }
     }