Add usePreventScroll

bun.lock

@@ -108,6 +108,7 @@
         "parse-cache-control": "^1.0.1",
         "partial-json": "^0.1.7",
         "react": "^19.0.0",
+        "react-aria": "^3.37.0",
         "react-dom": "^19.0.0",
         "react-hotkeys-hook": "^4.4.1",
         "rehype-sanitize": "^6.0.0",

packages/gitbook/package.json

@@ -37,6 +37,7 @@
         "@tailwindcss/typography": "^0.5.16",
         "ai": "^4.2.2",
         "assert-never": "^1.2.1",
+        "react-aria": "^3.37.0",
         "bun-types": "^1.1.20",
         "classnames": "^2.5.1",
         "event-iterator": "^2.0.0",

packages/gitbook/src/components/MobileMenu/MobileMenuScript.tsx

@@ -3,6 +3,7 @@
 import { useMobileMenuSheet } from '@/components/MobileMenu';
 import { usePathname } from 'next/navigation';
 import { useEffect } from 'react';
+import { usePreventScroll } from 'react-aria';
 
 export function MobileMenuScript() {
     const pathname = usePathname();
@@ -13,14 +14,10 @@ export function MobileMenuScript() {
         setOpen(false);
     }, [pathname]);
 
-    useEffect(() => {
-        // If the menu is open, we add a class to the body to prevent scrolling
-        if (open) {
-            document.body.style.overflow = 'hidden';
-        } else {
-            document.body.style.overflow = 'auto';
-        }
-    }, [open]);
+    // Prevent scrolling when the menu is open
+    usePreventScroll({
+        isDisabled: !open,
+    });
 
     return null;
 }