From e3c50caf13aa71bfe39530f35baeb3a0f0e1ed79 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Wed, 12 Mar 2025 17:15:54 +0000
Subject: [PATCH] fix(explorer): dont invert mobile css, properly toggle .collapsed
---
quartz/components/styles/explorer.scss | 10 +++++-----
quartz/components/scripts/explorer.inline.ts | 12 +++++++-----
2 files changed, 12 insertions(+), 10 deletions(-)
diff --git a/quartz/components/scripts/explorer.inline.ts b/quartz/components/scripts/explorer.inline.ts
index 7160492..d1a74d6 100644
--- a/quartz/components/scripts/explorer.inline.ts
+++ b/quartz/components/scripts/explorer.inline.ts
@@ -259,15 +259,17 @@
await setupExplorer(currentSlug)
// if mobile hamburger is visible, collapse by default
- for (const explorer of document.getElementsByClassName("mobile-explorer")) {
- if (explorer.checkVisibility()) {
+ for (const explorer of document.getElementsByClassName("explorer")) {
+ const mobileExplorer = explorer.querySelector(".mobile-explorer")
+ if (!mobileExplorer) return
+
+ if (mobileExplorer.checkVisibility()) {
explorer.classList.add("collapsed")
explorer.setAttribute("aria-expanded", "false")
}
- }
- const hiddenUntilDoneLoading = document.querySelector(".mobile-explorer")
- hiddenUntilDoneLoading?.classList.remove("hide-until-loaded")
+ mobileExplorer.classList.remove("hide-until-loaded")
+ }
})
function setFolderState(folderElement: HTMLElement, collapsed: boolean) {
diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss
index 69f7909..c284cb2 100644
--- a/quartz/components/styles/explorer.scss
+++ b/quartz/components/styles/explorer.scss
@@ -212,8 +212,8 @@
flex: 0 0 34px;
& > .explorer-content {
- transform: translateX(0);
- visibility: visible;
+ transform: translateX(-100vw);
+ visibility: hidden;
}
}
@@ -221,8 +221,8 @@
flex: 0 0 34px;
& > .explorer-content {
- transform: translateX(-100vw);
- visibility: hidden;
+ transform: translateX(0);
+ visibility: visible;
}
}
@@ -236,7 +236,7 @@
background-color: var(--light);
max-width: 100vw;
width: 100%;
- transform: translateX(0);
+ transform: translateX(-100vw);
transition:
transform 200ms ease,
visibility 200ms ease;
--
Gitblit v1.10.0