From c2e94779413b4d12aeaac0089efecc941355ccb5 Mon Sep 17 00:00:00 2001
From: saberzero1 <github@emilebangma.com>
Date: Sat, 26 Oct 2024 18:01:02 +0200
Subject: [PATCH] Slide in + no ugly onload animation on mobile

---
 quartz/components/Explorer.tsx               |  2 +-
 quartz/components/scripts/explorer.inline.ts | 17 +++-----
 quartz/components/styles/explorer.scss       | 43 ++++++++++++++------
 3 files changed, 37 insertions(+), 25 deletions(-)

diff --git a/quartz/components/Explorer.tsx b/quartz/components/Explorer.tsx
index e598d12dd..1f2f3e0f1 100644
--- a/quartz/components/Explorer.tsx
+++ b/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}
diff --git a/quartz/components/scripts/explorer.inline.ts b/quartz/components/scripts/explorer.inline.ts
index 1d8bf854a..33e5ba6f5 100644
--- a/quartz/components/scripts/explorer.inline.ts
+++ b/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()
 })
 
diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss
index 0c221ca6a..a336c6bc3 100644
--- a/quartz/components/styles/explorer.scss
+++ b/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;
       }
     }