From 9f27815908dfe6dd960c9b1d98636b7a66db52a2 Mon Sep 17 00:00:00 2001
From: ruinivist <ruinivist@proton.me>
Date: Sun, 29 Mar 2026 02:29:54 +0000
Subject: [PATCH] explorer: dismiss mobile drawer on outside click

---
 quartz/components/Explorer.tsx               |  1 +
 quartz/components/scripts/explorer.inline.ts |  6 ++++++
 quartz/components/styles/explorer.scss       | 13 +++++++++++--
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/quartz/components/Explorer.tsx b/quartz/components/Explorer.tsx
index e4cbcab..435a482 100644
--- a/quartz/components/Explorer.tsx
+++ b/quartz/components/Explorer.tsx
@@ -122,6 +122,7 @@ export default ((userOpts?: Partial<Options>) => {
         <div id={id} class="explorer-content" aria-expanded={false} role="group">
           <OverflowList class="explorer-ul" />
         </div>
+        <div class="explorer-dismiss-area" />
         <template id="template-file">
           <li>
             <a href="#"></a>
diff --git a/quartz/components/scripts/explorer.inline.ts b/quartz/components/scripts/explorer.inline.ts
index 3c6851c..168fce2 100644
--- a/quartz/components/scripts/explorer.inline.ts
+++ b/quartz/components/scripts/explorer.inline.ts
@@ -259,6 +259,12 @@ async function setupExplorer(currentSlug: FullSlug) {
       icon.addEventListener("click", toggleFolder)
       window.addCleanup(() => icon.removeEventListener("click", toggleFolder))
     }
+
+    const dismissArea = explorer.querySelector(".explorer-dismiss-area") as MaybeHTMLElement
+    if (dismissArea) {
+      dismissArea.addEventListener("click", toggleExplorer)
+      window.addCleanup(() => dismissArea.removeEventListener("click", toggleExplorer))
+    }
   }
 }
 
diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss
index c17e1b8..4833e6f 100644
--- a/quartz/components/styles/explorer.scss
+++ b/quartz/components/styles/explorer.scss
@@ -239,6 +239,15 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
         transform: translateX(0);
         visibility: visible;
       }
+
+      & > .explorer-dismiss-area {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: 20vw;
+        z-index: 98;
+      }
     }
 
     .explorer-content {
@@ -249,8 +258,8 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
       left: 0;
       margin-top: 0;
       background-color: var(--light);
-      max-width: 100vw;
-      width: 100vw;
+      max-width: 80vw;
+      width: 80vw;
       transform: translateX(-100vw);
       transition:
         transform 200ms ease,