fix(docs): unmount mobile sidebar toggle while drawer is open

The portaled toggle stayed in the DOM with `.hidden { opacity: 0;
pointer-events: none }` while the drawer was open, but on iOS Safari
the fixed button at top: 70px still absorbed taps that landed on the
drawer's first menu items ("APIs" header at y≈88-120px). Returning
null from the conditional removes the element entirely so drawer
items underneath get every tap.

Also bumps baseline-browser-mapping to ^2.10.22 to silence the
"data is over two months old" warning from browserslist.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: hyochan

bun.lock

@@ -36,6 +36,7 @@
     "@typescript-eslint/parser": "^8.39.1",
     "@vitejs/plugin-react": "^4.3.1",
     "babel-plugin-react-compiler": "^19.1.0-rc.2",
+    "baseline-browser-mapping": "^2.10.22",
     "eslint": "^9.21.0",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.7",

packages/docs/package.json

@@ -153,40 +153,44 @@ function Docs() {
   }, []);
 
   // Portal the sidebar toggle to document.body so it sits OUTSIDE any
-  // ancestor's stacking context. Several earlier rounds of "z-index 9001
-  // should beat the top nav's 100" still left the docs Menu button
-  // un-tappable on mobile WebKit because some ancestor of
-  // `.docs-container` (.main-content / .layout) was apparently painting
-  // its own stacking layer below the navigation. Rendering at body root
-  // makes the toggle a true top-level fixed element, immune to that.
-  const sidebarToggle = createPortal(
-    <button
-      type="button"
-      className={`docs-sidebar-toggle ${isSidebarOpen ? 'hidden' : ''} ${isScrolled ? 'scrolled' : ''}`}
-      onClick={(event) => {
-        event.stopPropagation();
-        setIsSidebarOpen((open) => !open);
-      }}
-      aria-label="Toggle sidebar"
-    >
-      <svg
-        width="20"
-        height="20"
-        viewBox="0 0 20 20"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M3 5h14M3 10h14M3 15h14"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-        />
-      </svg>
-      <span>Menu</span>
-    </button>,
-    document.body
-  );
+  // ancestor's stacking context, AND fully unmount it while the drawer
+  // is open. Earlier rounds left the toggle in the DOM with
+  // `.hidden { opacity: 0; pointer-events: none }` while the drawer was
+  // open, which on iOS Safari still let the toggle absorb taps that
+  // landed on the drawer's first menu item ("APIs" header sits at
+  // y≈88-120px, exactly where the fixed toggle at top: 70px lives).
+  // Removing the element from the DOM entirely guarantees the drawer
+  // items underneath get every tap they should.
+  const sidebarToggle = isSidebarOpen
+    ? null
+    : createPortal(
+        <button
+          type="button"
+          className={`docs-sidebar-toggle ${isScrolled ? 'scrolled' : ''}`}
+          onClick={(event) => {
+            event.stopPropagation();
+            setIsSidebarOpen(true);
+          }}
+          aria-label="Toggle sidebar"
+        >
+          <svg
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M3 5h14M3 10h14M3 15h14"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+            />
+          </svg>
+          <span>Menu</span>
+        </button>,
+        document.body
+      );
 
   return (
     <div className="docs-container">