fix touch for menu preview

Author: tannerlinsley

media/brand.sketch

@@ -4,6 +4,7 @@ import { GithubIcon } from '~/components/icons/GithubIcon'
 import { DiscordIcon } from '~/components/icons/DiscordIcon'
 import { Link, useMatches, useParams } from '@tanstack/react-router'
 import { useLocalStorage } from '~/utils/useLocalStorage'
+import { useClickOutside } from '~/hooks/useClickOutside'
 import { last } from '~/utils/utils'
 import type { ConfigSchema, MenuItem } from '~/utils/config'
 import { Framework } from '~/libraries'
@@ -92,10 +93,13 @@ function DocsMenuStrip({
   }
 
   return (
-    <div
-      className="flex flex-col gap-2 py-2 px-2 cursor-pointer h-full w-full"
+    <button
+      type="button"
+      className="flex flex-col gap-2 py-2 px-2 cursor-pointer h-full w-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-400/50"
       onPointerEnter={onHover}
+      onFocus={onHover}
       onClick={onClick}
+      aria-label="Open documentation menu"
     >
       {/* FrameworkSelect + VersionSelect icons */}
       <div className="flex flex-col gap-2 shrink-0">
@@ -140,7 +144,7 @@ function DocsMenuStrip({
           )
         })}
       </div>
-    </div>
+    </button>
   )
 }
 
@@ -346,9 +350,9 @@ export function DocsLayout({
           {group?.label}
         </LabelComp>
         <div className="h-2" />
-        <ul className="text-[.85em] leading-6 list-none">
+        <ul className="text-[.85em] leading-snug list-none">
           {group?.children?.map((child, i) => {
-            const linkClasses = `flex gap-2 items-center justify-between group px-2 py-0.5 rounded-lg hover:bg-gray-500/10 opacity-60 hover:opacity-100`
+            const linkClasses = `flex gap-2 items-center justify-between group px-2 py-1.5 rounded-lg hover:bg-gray-500/10 opacity-60 hover:opacity-100`
 
             return (
               <li key={i}>
@@ -386,7 +390,7 @@ export function DocsLayout({
                         >
                           <div
                             className={twMerge(
-                              'overflow-auto w-full',
+                              'w-full',
                               props.isActive
                                 ? `font-bold text-transparent bg-clip-text bg-linear-to-r ${colorFrom} ${colorTo}`
                                 : '',
@@ -423,7 +427,7 @@ export function DocsLayout({
             Documentation
           </div>
         </summary>
-        <div className="flex flex-col gap-4 p-4 whitespace-nowrap overflow-y-auto border-t border-gray-500/20 bg-white/20 text-lg dark:bg-black/20">
+        <div className="flex flex-col gap-4 p-4 overflow-y-auto border-t border-gray-500/20 bg-white/20 text-lg dark:bg-black/20">
           <div className="flex flex-col gap-1">
             <FrameworkSelect libraryId={libraryId} />
             <VersionSelect libraryId={libraryId} />
@@ -439,6 +443,15 @@ export function DocsLayout({
   const [showLargeMenu, setShowLargeMenu] = React.useState(false)
   const leaveTimer = React.useRef<NodeJS.Timeout | undefined>(undefined)
 
+  // Close menu when clicking outside (only on sm-xl screens where it's an overlay)
+  const expandedMenuRef = useClickOutside<HTMLDivElement>({
+    enabled:
+      showLargeMenu &&
+      typeof window !== 'undefined' &&
+      window.innerWidth < 1280,
+    onClickOutside: () => setShowLargeMenu(false),
+  })
+
   const largeMenu = (
     <>
       {/* Collapsed strip - visible on sm to xl, hidden on xl+. Lower z-index so expanded menu covers it */}
@@ -467,20 +480,22 @@ export function DocsLayout({
           }}
           onClick={() => {
             if (window.innerWidth < 1280) {
-              setShowLargeMenu((prev) => !prev)
+              clearTimeout(leaveTimer.current)
+              setShowLargeMenu(true)
             }
           }}
         />
       </div>
 
       {/* Expanded menu - always visible on xl+, toggleable overlay on sm-xl */}
       <div
+        ref={expandedMenuRef}
         className={twMerge(
           'max-w-[250px] xl:max-w-[300px] 2xl:max-w-[400px]',
-          'flex-col gap-4',
+          'flex-col',
           'h-[calc(100dvh-var(--navbar-height))] top-[var(--navbar-height)]',
           'z-20 border-r border-gray-500/20',
-          'transition-all duration-300 p-4',
+          'transition-all duration-300',
           // Hidden on smallest screens, flex on sm+
           'hidden sm:flex',
           // On sm to xl: fixed overlay that slides in from left-0 (covers the strip)
@@ -505,12 +520,14 @@ export function DocsLayout({
           }
         }}
       >
-        <div className="flex flex-col gap-1">
-          <FrameworkSelect libraryId={libraryId} />
-          <VersionSelect libraryId={libraryId} />
-        </div>
-        <div className="flex-1 flex flex-col gap-4 whitespace-nowrap overflow-y-auto text-base pb-4">
-          {menuItems}
+        <div className="flex-1 flex flex-col overflow-y-auto">
+          <div className="flex flex-col gap-1 p-4">
+            <FrameworkSelect libraryId={libraryId} />
+            <VersionSelect libraryId={libraryId} />
+          </div>
+          <div className="flex-1 flex flex-col gap-4 text-base px-4 pt-0 pb-4">
+            {menuItems}
+          </div>
         </div>
       </div>
     </>

src/components/DocsLayout.tsx

@@ -81,7 +81,7 @@ export function MarkdownContent({
         ref={containerRef}
         className={twMerge(
           'prose prose-gray dark:prose-invert max-w-none',
-          '[font-size:14px]',
+          '[font-size:16px]',
           'styled-markdown-content',
           proseClassName,
         )}

src/components/MarkdownContent.tsx

@@ -28,6 +28,7 @@ import {
 } from '~/components/AuthComponents'
 import { libraries } from '~/libraries'
 import { useCapabilities } from '~/hooks/useCapabilities'
+import { useClickOutside } from '~/hooks/useClickOutside'
 import { GithubIcon } from '~/components/icons/GithubIcon'
 import { DiscordIcon } from '~/components/icons/DiscordIcon'
 import { InstagramIcon } from '~/components/icons/InstagramIcon'
@@ -67,27 +68,16 @@ export function Navbar({ children }: { children: React.ReactNode }) {
   }, [])
 
   const [showMenu, setShowMenu] = React.useState(false)
-  const smallMenuRef = React.useRef<HTMLDivElement>(null)
 
   const toggleMenu = () => {
     setShowMenu((prev) => !prev)
   }
 
   // Close mobile menu when clicking outside
-  React.useEffect(() => {
-    if (!showMenu) return
-
-    const handleClickOutside = (event: MouseEvent) => {
-      const target = event.target as HTMLElement
-      // Check if click is outside the small menu
-      if (smallMenuRef.current && !smallMenuRef.current.contains(target)) {
-        setShowMenu(false)
-      }
-    }
-
-    document.addEventListener('click', handleClickOutside)
-    return () => document.removeEventListener('click', handleClickOutside)
-  }, [showMenu])
+  const smallMenuRef = useClickOutside<HTMLDivElement>({
+    enabled: showMenu,
+    onClickOutside: () => setShowMenu(false),
+  })
 
   const loginButton = (
     <>
@@ -176,17 +166,13 @@ export function Navbar({ children }: { children: React.ReactNode }) {
   )
 
   const navbar = (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
     <div
       className={twMerge(
         'w-full p-2 fixed top-0 z-[100] bg-white/90 dark:bg-black/90 backdrop-blur-lg',
         'flex items-center justify-between gap-4',
         'border-b border-gray-500/20',
       )}
       ref={containerRef}
-      onClick={() => {
-        setShowMenu(false)
-      }}
     >
       <div className="flex items-center gap-4">
         <div className="flex items-center gap-2 font-black text-xl uppercase">
@@ -202,10 +188,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
                   ? 'lg:w-9 lg:opacity-100 lg:translate-x-0'
                   : 'lg:w-0 lg:opacity-0 lg:-translate-x-full',
               )}
-              onClick={(e) => {
-                e.stopPropagation()
-                toggleMenu()
-              }}
+              onClick={toggleMenu}
               onPointerEnter={() => {
                 if (window.innerWidth < 1024) {
                   return

src/components/Navbar.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react'
+
+type UseClickOutsideOptions = {
+  /** Whether the click-outside detection is active */
+  enabled: boolean
+  /** Callback when a click outside is detected */
+  onClickOutside: () => void
+  /** Whether to also close on Escape key press (default: true) */
+  closeOnEscape?: boolean
+}
+
+/**
+ * Hook to detect clicks outside of a referenced element.
+ * Returns a ref to attach to the element you want to detect clicks outside of.
+ *
+ * @example
+ * ```tsx
+ * const menuRef = useClickOutside({
+ *   enabled: isMenuOpen,
+ *   onClickOutside: () => setIsMenuOpen(false),
+ * })
+ *
+ * return <div ref={menuRef}>Menu content</div>
+ * ```
+ */
+export function useClickOutside<T extends HTMLElement = HTMLElement>({
+  enabled,
+  onClickOutside,
+  closeOnEscape = true,
+}: UseClickOutsideOptions): React.RefObject<T | null> {
+  const ref = React.useRef<T>(null)
+
+  React.useEffect(() => {
+    if (!enabled) return
+
+    const handleClickOutside = (event: MouseEvent) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        onClickOutside()
+      }
+    }
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClickOutside()
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+    if (closeOnEscape) {
+      document.addEventListener('keydown', handleEscape)
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+      if (closeOnEscape) {
+        document.removeEventListener('keydown', handleEscape)
+      }
+    }
+  }, [enabled, onClickOutside, closeOnEscape])
+
+  return ref
+}