From d02bb0f044426d741d81a50398dd25c4c28564fd Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Sun, 9 Mar 2025 14:49:53 -0700
Subject: [PATCH] more style fixes

---
 quartz/components/Explorer.tsx               |  2 +-
 quartz/components/scripts/explorer.inline.ts | 15 ++++++-----
 quartz/components/styles/explorer.scss       | 28 ++++++++++----------
 3 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/quartz/components/Explorer.tsx b/quartz/components/Explorer.tsx
index e6af8629f..9c1fbdcfe 100644
--- a/quartz/components/Explorer.tsx
+++ b/quartz/components/Explorer.tsx
@@ -74,7 +74,7 @@ export default ((userOpts?: Partial<Options>) => {
         <button
           type="button"
           id="mobile-explorer"
-          class="collapsed hide-until-loaded explorer-toggle"
+          class="explorer-toggle hide-until-loaded"
           data-mobile={true}
           aria-controls="explorer-content"
         >
diff --git a/quartz/components/scripts/explorer.inline.ts b/quartz/components/scripts/explorer.inline.ts
index 9e918eebf..15f3a84dd 100644
--- a/quartz/components/scripts/explorer.inline.ts
+++ b/quartz/components/scripts/explorer.inline.ts
@@ -259,14 +259,17 @@ document.addEventListener("prenav", async (e: CustomEventMap["prenav"]) => {
 
 document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
   const currentSlug = e.detail.url
-  // collapse explorer on mobile
-  for (const explorer of document.querySelectorAll(".explorer")) {
-    explorer.classList.add("collapsed")
-    explorer.setAttribute("aria-expanded", "false")
-  }
   await setupExplorer(currentSlug)
 
-  // Hide explorer on mobile until it is requested
+  // if mobile hamburger is visible, collapse by default
+  const mobileExplorer = document.getElementById("mobile-explorer")
+  if (mobileExplorer && mobileExplorer.checkVisibility()) {
+    for (const explorer of document.querySelectorAll(".explorer")) {
+      explorer.classList.add("collapsed")
+      explorer.setAttribute("aria-expanded", "false")
+    }
+  }
+
   const hiddenUntilDoneLoading = document.querySelector("#mobile-explorer")
   hiddenUntilDoneLoading?.classList.remove("hide-until-loaded")
 })
diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss
index 714eb2c40..b76972628 100644
--- a/quartz/components/styles/explorer.scss
+++ b/quartz/components/styles/explorer.scss
@@ -16,10 +16,10 @@
       box-sizing: border-box;
       position: sticky;
       background-color: var(--light);
+      padding: 1rem 0 1rem 0;
+      margin: 0;
     }
 
-    // Hide Explorer on mobile until done loading.
-    // Prevents ugly animation on page load.
     .hide-until-loaded ~ #explorer-content {
       display: none;
     }
@@ -33,6 +33,15 @@
   flex: 0 1 auto;
   &.collapsed {
     flex: 0 1 1.2rem;
+    & .fold {
+      transform: rotateZ(-90deg);
+    }
+  }
+
+  & .fold {
+    margin-left: 0.5rem;
+    transition: transform 0.3s ease;
+    opacity: 0.8;
   }
 
   @media all and ($mobile) {
@@ -93,16 +102,6 @@ button#desktop-explorer {
     display: inline-block;
     margin: 0;
   }
-
-  & .fold {
-    margin-left: 0.5rem;
-    transition: transform 0.3s ease;
-    opacity: 0.8;
-  }
-
-  .explorer.collapsed .fold {
-    transform: rotateZ(-90deg);
-  }
 }
 
 #explorer-content {
@@ -113,7 +112,7 @@ button#desktop-explorer {
 
   & ul {
     list-style: none;
-    margin: 0.08rem 0;
+    margin: 0;
     padding: 0;
 
     & li > a {
@@ -231,6 +230,7 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
       position: absolute;
       top: 0;
       left: 0;
+      margin-top: 0;
       background-color: var(--light);
       max-width: 100vw;
       width: 100%;
@@ -239,7 +239,7 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
         transform 200ms ease,
         visibility 200ms ease;
       overflow: hidden;
-      padding: $topSpacing 0 2rem 0;
+      padding: 4rem 0 2rem 0;
       height: 100dvh;
       max-height: 100dvh;
       visibility: hidden;