diff --git a/bun.lock b/bun.lock index 3ff6d61c4..2ada8eeb1 100644 --- a/bun.lock +++ b/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", diff --git a/packages/gitbook/package.json b/packages/gitbook/package.json index 379f975a1..1464efe30 100644 --- a/packages/gitbook/package.json +++ b/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", diff --git a/packages/gitbook/src/components/MobileMenu/MobileMenuScript.tsx b/packages/gitbook/src/components/MobileMenu/MobileMenuScript.tsx index 225d50ed3..9bfdd3349 100644 --- a/packages/gitbook/src/components/MobileMenu/MobileMenuScript.tsx +++ b/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; }