Combine into single explorer tree

quartz/components/Explorer.tsx

@@ -88,7 +88,7 @@ export default ((userOpts?: Partial<Options>) => {
     }
     return (
       <div class="explorer-container">
-        <div class={`mobile-explorer explorer ${displayClass ?? ""}`}>
+        <div class={`explorer ${displayClass ?? ""}`}>
           <button
             type="button"
             id="mobile-explorer"
@@ -115,14 +115,6 @@ export default ((userOpts?: Partial<Options>) => {
               <line x1="4" x2="20" y1="18" y2="18" />
             </svg>
           </button>
-          <div id="explorer-content" class="collapsed">
-            <ul class="overflow" id="explorer-ul">
-              <ExplorerNode node={fileTree} opts={opts} fileData={fileData} />
-              <li id="explorer-end" />
-            </ul>
-          </div>
-        </div>
-        <div class={`desktop-explorer explorer ${displayClass ?? ""}`}>
           <button
             type="button"
             id="desktop-explorer"

quartz/components/scripts/explorer.inline.ts

@@ -58,11 +58,15 @@ function toggleFolder(evt: MouseEvent) {
 function toggleExplorer(this: HTMLElement) {
   // Toggle collapsed state of entire explorer
   this.classList.toggle("collapsed")
-  const content = this.nextElementSibling as MaybeHTMLElement
+  const content = (
+    this.nextElementSibling?.nextElementSibling
+      ? this.nextElementSibling.nextElementSibling
+      : this.nextElementSibling
+  ) as MaybeHTMLElement
   if (!content) return
   content.classList.toggle("collapsed")
   //content.style.maxHeight = content.style.maxHeight === "0px" ? content.scrollHeight + "px" : "0px"
-  content.style.maxHeight = content.style.maxHeight === "0px" ? "100dvh" : "0px"
+  content.classList.toggle("explorer-viewmode")
 
   //prevent scroll under
   if (document.querySelector("#mobile-explorer")) {
@@ -167,9 +171,9 @@ document.addEventListener("DOMContentLoaded", () => {
   const explorer = document.querySelector("#mobile-explorer")
   if (explorer) {
     explorer.classList.add("collapsed")
-    const content = explorer.nextElementSibling as HTMLElement
+    const content = explorer.nextElementSibling?.nextElementSibling as HTMLElement
     content.classList.add("collapsed")
-    content.style.maxHeight = "0px"
+    content.classList.toggle("explorer-viewmode")
   }
   toggleExplorerFolders()
 })
@@ -178,9 +182,9 @@ document.addEventListener("nav", () => {
   const explorer = document.querySelector("#mobile-explorer")
   if (explorer) {
     explorer.classList.add("collapsed")
-    const content = explorer.nextElementSibling as HTMLElement
+    const content = explorer.nextElementSibling?.nextElementSibling as HTMLElement
     content.classList.add("collapsed")
-    content.style.maxHeight = "0px"
+    content.classList.toggle("explorer-viewmode")
   }
   setupExplorer()
   //add collapsed class to all folders

quartz/components/styles/explorer.scss

@@ -2,24 +2,24 @@
 
 .explorer-container {
   overflow-y: hidden;
-  .mobile-explorer {
+
+  .explorer {
+    display: flex;
+    button#mobile-explorer {
       display: none;
     }
-  .desktop-explorer {
+    button#desktop-explorer {
       display: flex;
     }
     @media all and ($mobile) {
       order: -1;
-    .mobile-explorer {
+      button#mobile-explorer {
         display: flex;
       }
-    .desktop-explorer {
+      button#desktop-explorer {
         display: none;
       }
     }
-
-  .mobile-explorer,
-  .desktop-explorer {
     height: 100%;
     flex-direction: column;
     overflow-y: hidden;
@@ -88,19 +88,19 @@
     list-style: none;
     overflow: hidden;
     overflow-y: auto;
+    max-height: 0px;
+    transition:
+      max-height 0.35s ease,
+      visibility 0s linear 0.35s;
+    margin-top: 0.5rem;
+    visibility: hidden;
+
+    &.collapsed {
       max-height: 100%;
       transition:
         max-height 0.35s ease,
         visibility 0s linear 0s;
-    margin-top: 0.5rem;
       visibility: visible;
-
-    &.collapsed {
-      max-height: 0;
-      transition:
-        max-height 0.35s ease,
-        visibility 0s linear 0.35s;
-      visibility: hidden;
     }
 
     & ul {
@@ -200,7 +200,8 @@
     margin: 0;
   }
 
-  .mobile-explorer {
+  .explorer {
+    @media all and ($mobile) {
       #explorer-content {
         overscroll-behavior: none;
         z-index: 100;
@@ -214,7 +215,8 @@
         padding: 1rem 2rem 5rem;
         height: 100%;
         max-height: calc(100dvh - 8rem);
-      margin-top: 36px;
+        margin-top: 2rem;
+        visibility: visible;
 
         &:not(.collapsed) {
           height: calc(100dvh - 8rem);
@@ -227,6 +229,7 @@
 
         &.collapsed {
           height: 0;
+          visibility: hidden;
         }
       }
 
@@ -245,6 +248,7 @@
         }
       }
     }
+  }
 
   .no-scroll {
     opacity: 0;