From 90e984e98b21a601c2461f285d35fe73509ee7af Mon Sep 17 00:00:00 2001
From: saberzero1 <github@emilebangma.com>
Date: Sat, 26 Oct 2024 14:44:58 +0200
Subject: [PATCH] Restore position

---
 quartz/components/scripts/explorer.inline.ts | 13 +++++++-
 quartz/components/styles/explorer.scss       | 32 +++++++++-----------
 2 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/quartz/components/scripts/explorer.inline.ts b/quartz/components/scripts/explorer.inline.ts
index a59224d0e..1d8bf854a 100644
--- a/quartz/components/scripts/explorer.inline.ts
+++ b/quartz/components/scripts/explorer.inline.ts
@@ -40,7 +40,18 @@ 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) bodySelector.classList.toggle("lock-scroll")
+    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",
+        })
+      }
+    }
   }
 }
 
diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss
index 322818afd..0c221ca6a 100644
--- a/quartz/components/styles/explorer.scss
+++ b/quartz/components/styles/explorer.scss
@@ -1,14 +1,23 @@
 @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);
+  }
+}
+
 .explorer {
+  display: flex;
+
   @media all and ($mobile) {
     order: -1;
     height: initial;
     overflow: hidden;
   }
 
-  display: flex;
-
   button#mobile-explorer {
     display: none;
   }
@@ -220,7 +229,8 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
       position: absolute;
       background-color: var(--light);
       max-width: 100dvw;
-      left: -100dvw;
+      //left: -100dvw;
+      transform: translateX(-100dvw);
       width: 100%;
       transition: all 300ms ease-in-out;
       overflow: hidden;
@@ -231,7 +241,7 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
       visibility: visible;
 
       &:not(.collapsed) {
-        left: 0;
+        transform: translateX(0);
       }
 
       ul.overflow {
@@ -240,7 +250,7 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
       }
 
       &.collapsed {
-        left: -100dvw;
+        transform: translateX(-100dvw);
         visibility: visible;
       }
     }
@@ -284,15 +294,3 @@ html:has(.no-scroll) {
     overflow: auto !important;
   }
 }
-
-// Lock page scroll on mobile
-.lock-scroll {
-  position: static;
-}
-
-@media all and ($mobile) {
-  .lock-scroll {
-    position: fixed;
-    width: calc(100% - 2rem);
-  }
-}