Fix MobileMenu

Author: nolannbiron

packages/gitbook/src/components/Header/HeaderMobileMenuButton.tsx

@@ -1,12 +1,10 @@
 'use client';
 
 import { Icon } from '@gitbook/icons';
-import { useEffect } from 'react';
 
 import { useMobileMenuSheet } from '@/components/MobileMenu/useMobileMenuSheet';
 import { tString, useLanguage } from '@/intl/client';
 import { tcls } from '@/lib/tailwind';
-import { usePathname } from 'next/navigation';
 
 /**
  * Button to show/hide the table of content on mobile.
@@ -15,18 +13,12 @@ export function HeaderMobileMenuButton(
     props: Partial<React.ButtonHTMLAttributes<HTMLButtonElement>>
 ) {
     const language = useLanguage();
-    const pathname = usePathname();
     const { open, setOpen } = useMobileMenuSheet();
 
     const toggleNavigation = () => {
         setOpen(!open);
     };
 
-    // biome-ignore lint/correctness/useExhaustiveDependencies: Close the navigation when navigating to a page
-    useEffect(() => {
-        setOpen(false);
-    }, [pathname]);
-
     return (
         <button
             {...props}

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

@@ -0,0 +1,26 @@
+'use client';
+
+import { useMobileMenuSheet } from '@/components/MobileMenu';
+import { usePathname } from 'next/navigation';
+import { useEffect } from 'react';
+
+export function MobileMenuScript() {
+    const pathname = usePathname();
+    const { open, setOpen } = useMobileMenuSheet();
+
+    // biome-ignore lint/correctness/useExhaustiveDependencies: Close the navigation when navigating to a page
+    useEffect(() => {
+        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]);
+
+    return null;
+}

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

@@ -1,2 +1,2 @@
-export * from './MobileMenuSheet';
 export * from './useMobileMenuSheet';
+export * from './MobileMenuScript';

packages/gitbook/src/components/MobileMenu/index.ts

@@ -1,41 +1,69 @@
 'use client';
 
-import type React from 'react';
-
-import { MobileMenuSheet } from '@/components/MobileMenu';
-import { useIsMobile } from '@/hooks/useIsMobile';
+import { MobileMenuScript, useMobileMenuSheet } from '@/components/MobileMenu';
+import { Button } from '@/components/primitives';
 import { tcls } from '@/lib/tailwind';
+import type React from 'react';
 import { TableOfContentsScript } from './TableOfContentsScript';
 
 export function TableOfContents(props: {
     header?: React.ReactNode; // Displayed outside the scrollable TOC as a sticky header
     children: React.ReactNode;
 }) {
     const { header, children } = props;
-    const isMobile = useIsMobile();
-
-    // If the screen is mobile, we use the mobile menu sheet to display the table of contents.
-    if (isMobile) {
-        return <MobileMenuSheet>{children}</MobileMenuSheet>;
-    }
+    const { open, setOpen } = useMobileMenuSheet();
 
     return (
         <>
+            <div
+                className="fixed inset-0 z-40 bg-tint-12/4 backdrop-blur-lg data-[state=closed]:pointer-events-none data-[state=closed]:invisible data-[state=closed]:animate-fadeOut data-[state=open]:animate-fadeIn data-[state=open]:animate-in lg:hidden dark:bg-tint-1/6"
+                data-state={open ? 'open' : 'closed'}
+                onClick={() => setOpen(false)}
+            />
             <aside // Sidebar container, responsible for setting the right dimensions and position for the sidebar.
                 data-testid="table-of-contents"
                 id="table-of-contents"
+                data-state={open ? 'open' : 'closed'}
                 className={tcls(
                     'group',
+
+                    'flex',
+                    'flex-col',
+
+                    'max-lg:fixed',
+                    'max-lg:z-50',
+
+                    'max-lg:transition',
+                    'max-lg:ease-in-out',
+                    'max-lg:duration-500',
+
+                    'max-lg:rounded-xl',
+                    'max-lg:circular-corners:rounded-2xl',
+                    'max-lg:straight-corners:rounded-none',
+                    'max-lg:bg-tint-base',
+                    'max-lg:sidebar-filled:bg-tint-subtle',
+                    'max-lg:theme-muted:bg-tint-subtle',
+                    'max-lg:[html.sidebar-filled.theme-bold.tint_&]:bg-tint-subtle',
+                    'max-lg:[html.sidebar-filled.theme-muted_&]:bg-tint-base',
+                    'max-lg:[html.sidebar-filled.theme-bold.tint_&]:bg-tint-base',
+
+                    'max-lg:w-10/12',
+                    'max-lg:shadow-lg',
+                    'max-lg:depth-flat:shadow-none',
+                    'max-lg:inset-1.5',
+                    'max-lg:transition-all',
+                    'max-lg:duration-300',
+                    'max-lg:max-w-sm',
+                    'max-lg:data-[state=open]:left-1.5',
+                    'max-lg:data-[state=closed]:-left-full',
+
                     'text-sm',
 
                     'grow-0',
                     'shrink-0',
-                    'basis-full',
                     'lg:basis-72',
                     'page-no-toc:lg:basis-56',
 
-                    'relative',
-                    'z-[1]',
                     'lg:sticky',
                     'lg:mr-12',
 
@@ -56,25 +84,37 @@ export function TableOfContents(props: {
                     '[html[style*="--toc-top-offset"]_&]:lg:!top-[var(--toc-top-offset)]',
                     '[html[style*="--toc-height"]_&]:lg:!h-[var(--toc-height)]',
 
-                    'pt-6',
-                    'pb-4',
+                    'lg:pt-6',
+                    'lg:pb-4',
                     'sidebar-filled:lg:pr-6',
                     'page-no-toc:lg:pr-0',
 
-                    'hidden',
-                    'lg:flex',
                     'page-no-toc:lg:hidden',
                     'page-no-toc:xl:flex',
                     'site-header-none:page-no-toc:lg:flex',
-                    'flex-col',
                     'gap-4',
                     'border-tint-subtle'
                 )}
             >
                 {header && header}
+
+                {open ? (
+                    <Button
+                        variant="secondary"
+                        icon="close"
+                        iconOnly
+                        autoFocus={false}
+                        className="absolute top-2 right-2 z-50 bg-transparent text-tint opacity-8 shadow-none ring-transparent"
+                        onClick={() => setOpen(false)}
+                    >
+                        <span className="sr-only">Close</span>
+                    </Button>
+                ) : null}
+
                 {children}
             </aside>
             <TableOfContentsScript />
+            <MobileMenuScript />
         </>
     );
 }

packages/gitbook/src/components/TableOfContents/TableOfContents.tsx

@@ -26,7 +26,8 @@ export function Trademark(props: {
 
                 'left-2',
                 'right-2',
-                'bottom-0',
+                'bottom-2',
+                'lg:bottom-0',
                 'lg:left-0',
 
                 'pt-2',