Mobile explorer

quartz.layout.ts

@@ -27,7 +27,7 @@ export const defaultContentPageLayout: PageLayout = {
     Component.MobileOnly(Component.Spacer()),
     Component.Search(),
     Component.Darkmode(),
-    Component.DesktopOnly(Component.Explorer()),
+    Component.Explorer(),
   ],
   right: [
     Component.Graph(),
@@ -44,7 +44,7 @@ export const defaultListPageLayout: PageLayout = {
     Component.MobileOnly(Component.Spacer()),
     Component.Search(),
     Component.Darkmode(),
-    Component.DesktopOnly(Component.Explorer()),
+    Component.Explorer(),
   ],
   right: [],
 }

quartz/components/Explorer.tsx

@@ -111,6 +111,29 @@ export default ((userOpts?: Partial<Options>) => {
           >
             <polyline points="6 9 12 15 18 9"></polyline>
           </svg>
+          <svg
+            width="24px"
+            height="24px"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            class="mobile-explorer-button"
+          >
+            <g clip-path="url(%23clip0_429_11066)">
+              <path
+                d="M3 6.00092H21M3 12.0009H21M3 18.0009H21"
+                stroke="%23292929"
+                stroke-width="2.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </g>
+            <defs>
+              <clipPath id="clip0_429_11066">
+                <rect width="24" height="24" fill="white" transform="translate(0 0.000915527)" />
+              </clipPath>
+            </defs>
+          </svg>
         </button>
         <div id="explorer-content">
           <ul class="overflow" id="explorer-ul">

quartz/components/scripts/explorer.inline.ts

@@ -24,8 +24,16 @@ function toggleExplorer(this: HTMLElement) {
   const content = this.nextElementSibling as MaybeHTMLElement
   if (!content) return
 
+  const mobileView = window.innerWidth <= 800
+
   content.classList.toggle("collapsed")
-  content.style.maxHeight = content.style.maxHeight === "0px" ? content.scrollHeight + "px" : "0px"
+  if (mobileView) {
+    content.style.maxHeight =
+      content.style.maxHeight === "0px" ? window.innerHeight - 72 + "px" : "0px"
+  } else {
+    content.style.maxHeight =
+      content.style.maxHeight === "0px" ? content.scrollHeight + "px" : "0px"
+  }
 }
 
 function toggleFolder(evt: MouseEvent) {
@@ -114,6 +122,12 @@ document.addEventListener("nav", () => {
   }
 })
 
+const explorerContent = document.getElementById("explorer-content")
+if (explorerContent && window.innerWidth <= 800) {
+  explorerContent.style.maxHeight =
+    explorerContent.style.maxHeight === "0px" ? explorerContent.scrollHeight + "px" : "0px"
+}
+
 /**
  * Toggles the state of a given folder
  * @param folderElement <div class="folder-outer"> Element of folder (parent)

quartz/components/styles/darkmode.scss

@@ -1,3 +1,5 @@
+@use "../../styles/variables.scss" as *;
+
 .darkmode {
   cursor: pointer;
   padding: 0;
@@ -7,6 +9,9 @@
   width: 20px;
   height: 20px;
   margin: 0 10px;
+  @media all and ($mobile) {
+    margin: auto 10px;
+  }
   text-align: inherit;
 
   & svg {

quartz/components/styles/explorer.scss

@@ -1,9 +1,7 @@
 @use "../../styles/variables.scss" as *;
 
 .explorer {
-  &.desktop-only {
-    overflow-y: auto;
-  }
+  overflow-y: auto;
   &:after {
     pointer-events: none;
     content: "";
@@ -16,6 +14,59 @@
     transition: opacity 0.3s ease;
     background: linear-gradient(transparent 0px, var(--light));
   }
+  @media all and ($mobile) {
+    position: fixed;
+    overflow: visible;
+    width: 32px;
+    height: 32px;
+    margin-top: auto;
+    margin-bottom: auto;
+    background-color: var(--light);
+    transition:
+      width 0s linear 0.35s,
+      height 0.35s ease,
+      visibility 0s linear 0.35s;
+    &:before {
+      content: "";
+      height: 0;
+      width: 100vw;
+      display: inline-block;
+      position: absolute;
+      bottom: 100%;
+      background-color: var(--light);
+      transition: height 0.35s ease;
+    }
+    &:has(> #explorer-content.collapsed) {
+      &:before {
+        height: 2rem;
+        transition: height 0.35s ease;
+      }
+      overflow: inherit;
+      width: 100%;
+      height: calc(100vh - 32px);
+      background-color: var(--light);
+      transition:
+        width 0s linear 0s,
+        height 0.35s ease,
+        visibility 0s linear 0s;
+      > button#explorer {
+        position: relative;
+      }
+    }
+    > button#explorer {
+      width: 32px;
+      height: 32px;
+    }
+    &::after {
+      display: none;
+    }
+  }
+}
+
+body:has(.explorer > #explorer-content.collapsed) {
+  @media all and ($mobile) {
+    overflow-y: hidden;
+  }
 }
 
 button#explorer {
@@ -43,6 +94,25 @@ button#explorer {
   &.collapsed .fold {
     transform: rotateZ(-90deg);
   }
+
+  .mobile-explorer-button {
+    display: none;
+    height: 32px;
+    width: 32px;
+  }
+
+  @media all and ($mobile) {
+    > h2,
+    > svg {
+      display: none;
+    }
+    .mobile-explorer-button {
+      display: block;
+      > * {
+        stroke: var(--darkgray);
+      }
+    }
+  }
 }
 
 .folder-outer {
@@ -76,6 +146,26 @@ button#explorer {
     visibility: hidden;
   }
 
+  @media all and ($mobile) {
+    transition:
+      max-height 0.35s ease,
+      visibility 0s linear 0.35s;
+    visibility: hidden;
+    max-height: 0px;
+    &.collapsed {
+      transition:
+        max-height 0.35s ease,
+        visibility 0s linear 0s;
+      visibility: visible;
+      max-height: calc(100vh - 32px);
+      max-width: calc(100vw - 20px);
+      overflow-y: auto;
+      .overflow:after {
+        background: none;
+      }
+    }
+  }
+
   & ul {
     list-style: none;
     margin: 0.08rem 0;

quartz/components/styles/search.scss

@@ -5,6 +5,8 @@
   max-width: 14rem;
   @media all and ($mobile) {
     flex-grow: 0.3;
+    margin-top: auto;
+    margin-bottom: auto;
   }
 
   & > .search-button {

quartz/styles/base.scss

@@ -194,7 +194,7 @@ a {
       flex-direction: column;
       @media all and ($mobile) {
         gap: 0;
-        align-items: center;
+        align-items: start;
         position: initial;
         display: flex;
         height: unset;