explorer: dismiss mobile drawer on outside click

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>

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))
+    }
   }
 }
 

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,