fix(explorer): dont invert mobile css, properly toggle .collapsed

Jacky Zhao

2025-03-12 e3c50caf13aa71bfe39530f35baeb3a0f0e1ed79

fix(explorer): dont invert mobile css, properly toggle .collapsed

 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) {

 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;