feat(web): dismiss mobile drawer when clicking outside (#2133)

* feat(web): dismiss mobile drawer when clicking outside

Co-Authored-By: [email protected] <[email protected]>

* style(web): make drawer backdrop transparent

Co-Authored-By: [email protected] <[email protected]>

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

Author: ComputelessComputer

apps/web/src/routes/_view/route.tsx

@@ -89,27 +89,35 @@ function MobileDocsDrawer({
   const scrollContainerRef = useRef<HTMLDivElement>(null);
 
   return (
-    <div
-      className={`fixed top-[69px] left-0 h-[calc(100vh-69px)] w-72 bg-white/80 backdrop-blur-sm border-r border-neutral-100 shadow-2xl shadow-neutral-900/20 z-50 md:hidden transition-transform duration-300 ease-in-out ${
-        isOpen ? "translate-x-0" : "-translate-x-full"
-      }`}
-      style={{
-        paddingLeft: "env(safe-area-inset-left)",
-      }}
-    >
+    <>
+      {isOpen && (
+        <div
+          className="fixed inset-0 top-[69px] z-40 md:hidden"
+          onClick={onClose}
+        />
+      )}
       <div
-        ref={scrollContainerRef}
-        className="h-full overflow-y-auto scrollbar-hide p-4"
+        className={`fixed top-[69px] left-0 h-[calc(100vh-69px)] w-72 bg-white/80 backdrop-blur-sm border-r border-neutral-100 shadow-2xl shadow-neutral-900/20 z-50 md:hidden transition-transform duration-300 ease-in-out ${
+          isOpen ? "translate-x-0" : "-translate-x-full"
+        }`}
+        style={{
+          paddingLeft: "env(safe-area-inset-left)",
+        }}
       >
-        <SidebarNavigation
-          sections={sections}
-          currentSlug={currentSlug}
-          onLinkClick={onClose}
-          scrollContainerRef={scrollContainerRef}
-          linkTo="/docs/$"
-        />
+        <div
+          ref={scrollContainerRef}
+          className="h-full overflow-y-auto scrollbar-hide p-4"
+        >
+          <SidebarNavigation
+            sections={sections}
+            currentSlug={currentSlug}
+            onLinkClick={onClose}
+            scrollContainerRef={scrollContainerRef}
+            linkTo="/docs/$"
+          />
+        </div>
       </div>
-    </div>
+    </>
   );
 }
 
@@ -168,26 +176,34 @@ function MobileHandbookDrawer({
   const scrollContainerRef = useRef<HTMLDivElement>(null);
 
   return (
-    <div
-      className={`fixed top-[69px] left-0 h-[calc(100vh-69px)] w-72 bg-white/80 backdrop-blur-sm border-r border-neutral-100 shadow-2xl shadow-neutral-900/20 z-50 md:hidden transition-transform duration-300 ease-in-out ${
-        isOpen ? "translate-x-0" : "-translate-x-full"
-      }`}
-      style={{
-        paddingLeft: "env(safe-area-inset-left)",
-      }}
-    >
+    <>
+      {isOpen && (
+        <div
+          className="fixed inset-0 top-[69px] z-40 md:hidden"
+          onClick={onClose}
+        />
+      )}
       <div
-        ref={scrollContainerRef}
-        className="h-full overflow-y-auto scrollbar-hide p-4"
+        className={`fixed top-[69px] left-0 h-[calc(100vh-69px)] w-72 bg-white/80 backdrop-blur-sm border-r border-neutral-100 shadow-2xl shadow-neutral-900/20 z-50 md:hidden transition-transform duration-300 ease-in-out ${
+          isOpen ? "translate-x-0" : "-translate-x-full"
+        }`}
+        style={{
+          paddingLeft: "env(safe-area-inset-left)",
+        }}
       >
-        <SidebarNavigation
-          sections={handbooksBySection.sections}
-          currentSlug={currentSlug}
-          onLinkClick={onClose}
-          scrollContainerRef={scrollContainerRef}
-          linkTo="/company-handbook/$"
-        />
+        <div
+          ref={scrollContainerRef}
+          className="h-full overflow-y-auto scrollbar-hide p-4"
+        >
+          <SidebarNavigation
+            sections={handbooksBySection.sections}
+            currentSlug={currentSlug}
+            onLinkClick={onClose}
+            scrollContainerRef={scrollContainerRef}
+            linkTo="/company-handbook/$"
+          />
+        </div>
       </div>
-    </div>
+    </>
   );
 }