Revamp mobile navigation

.changeset/sweet-hornets-change.md

@@ -0,0 +1,5 @@
+---
+'gitbook': minor
+---
+
+Revamp mobile navigation

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/e2e/internal.spec.ts

@@ -1621,6 +1621,57 @@ const testCases: TestsCase[] = [
             ]),
         ],
     },
+    {
+        name: 'Mobile menu',
+        contentBaseURL: 'https://gitbook-open-e2e-sites.gitbook.io/',
+        tests: [
+            {
+                name: 'Mobile menu open',
+                viewports: ['iphone-x'],
+                url: '',
+                run: async (page) => {
+                    // Set mobile viewport size to ensure mobile menu is visible
+                    await page.setViewportSize({ width: 375, height: 812 }); // iPhone X dimensions
+
+                    await page.locator('[data-testid="mobile-menu-button"]').click();
+
+                    // Wait for table of contents to appear
+                    const tableOfContents = page.locator('[data-testid="table-of-contents"]');
+                    await tableOfContents.waitFor({ state: 'visible', timeout: 5000 });
+                    await expect(tableOfContents).toBeVisible();
+                },
+            },
+            {
+                name: 'Mobile menu with dropdown menu',
+                viewports: ['iphone-x'],
+                url: 'multi-variants/',
+                run: async (page) => {
+                    // Set mobile viewport size to ensure mobile menu is visible
+                    await page.setViewportSize({ width: 375, height: 812 }); // iPhone X dimensions
+
+                    await page.locator('[data-testid="mobile-menu-button"]').click();
+
+                    // Wait for table of contents to appear
+                    const tableOfContents = page.locator('[data-testid="table-of-contents"]');
+                    await tableOfContents.waitFor({ state: 'visible', timeout: 5000 });
+                    await expect(tableOfContents).toBeVisible();
+
+                    // Wait for space dropdown button to be visible
+                    const spaceDropdownButton = tableOfContents.locator(
+                        '[data-testid="space-dropdown-button"]'
+                    );
+                    await spaceDropdownButton.waitFor({ state: 'visible', timeout: 5000 });
+                    await expect(spaceDropdownButton).toBeVisible();
+                    await spaceDropdownButton.click();
+
+                    // Wait for space dropdown to appear
+                    const spaceDropdown = page.locator('[data-testid="dropdown-menu"]');
+                    await spaceDropdown.waitFor({ state: 'visible', timeout: 5000 });
+                    await expect(spaceDropdown).toBeVisible();
+                },
+            },
+        ],
+    },
 ];
 
 runTestCases(testCases);

packages/gitbook/e2e/util.ts

@@ -64,6 +64,10 @@ export interface Test {
      * Whether to only run this test.
      */
     only?: boolean;
+    /**
+     * Viewport to use for the test.
+     */
+    viewports?: ('macbook-16' | 'macbook-13' | 'ipad-2' | 'iphone-x')[];
 }
 
 export type TestsCase = {
@@ -159,7 +163,7 @@ export function runTestCases(testCases: TestsCase[]) {
 
         test.describe(testCase.name, () => {
             for (const testEntry of testCase.tests) {
-                const { mode = 'page' } = testEntry;
+                const { mode = 'page', viewports } = testEntry;
                 const testFn = testEntry.only ? test.only : test;
                 testFn(testEntry.name, async ({ page, context }) => {
                     const testEntryPathname =
@@ -204,13 +208,18 @@ export function runTestCases(testCases: TestsCase[]) {
                         const screenshotName = `${testCase.name} - ${testEntry.name}`;
                         if (mode === 'image') {
                             await argosScreenshot(page, screenshotName, {
-                                viewports: ['macbook-13'],
+                                viewports: viewports ?? ['macbook-13'],
                                 threshold: screenshotOptions?.threshold ?? undefined,
                                 fullPage: true,
                             });
                         } else {
                             await argosScreenshot(page, screenshotName, {
-                                viewports: ['macbook-16', 'macbook-13', 'ipad-2', 'iphone-x'],
+                                viewports: viewports ?? [
+                                    'macbook-16',
+                                    'macbook-13',
+                                    'ipad-2',
+                                    'iphone-x',
+                                ],
                                 argosCSS: `
                             /* Hide Intercom */
                             .intercom-lightweight-app {

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/Header/DropdownMenu.tsx

@@ -7,6 +7,7 @@ import { useState } from 'react';
 import { type ClassValue, tcls } from '@/lib/tailwind';
 
 import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
+import { Slot } from '@radix-ui/react-slot';
 
 import { Link, type LinkInsightsProps } from '../primitives';
 
@@ -25,13 +26,21 @@ export function DropdownMenu(props: {
     children: React.ReactNode;
     /** Custom styles */
     className?: ClassValue;
-    /** Open the dropdown on hover */
+    /** Open the dropdown on hover
+     * @default false
+     */
     openOnHover?: boolean;
+    /** Whether to render the dropdown menu in a portal
+     * @default true
+     */
+    withPortal?: boolean;
 }) {
-    const { button, children, className, openOnHover = false } = props;
+    const { button, children, className, openOnHover = false, withPortal = true } = props;
     const [hovered, setHovered] = useState(false);
     const [clicked, setClicked] = useState(false);
 
+    const Portal = withPortal ? RadixDropdownMenu.Portal : Slot;
+
     return (
         <RadixDropdownMenu.Root
             modal={false}
@@ -48,15 +57,16 @@ export function DropdownMenu(props: {
                 {button}
             </RadixDropdownMenu.Trigger>
 
-            <RadixDropdownMenu.Portal>
+            <Portal>
                 <RadixDropdownMenu.Content
                     data-testid="dropdown-menu"
                     hideWhenDetached
                     collisionPadding={8}
                     onMouseEnter={() => setHovered(true)}
                     onMouseLeave={() => setHovered(false)}
                     align="start"
-                    className="z-40 animate-present pt-2"
+                    sideOffset={8}
+                    className="z-40 animate-present"
                 >
                     <div
                         className={tcls(
@@ -67,7 +77,7 @@ export function DropdownMenu(props: {
                         {children}
                     </div>
                 </RadixDropdownMenu.Content>
-            </RadixDropdownMenu.Portal>
+            </Portal>
         </RadixDropdownMenu.Root>
     );
 }

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

@@ -11,7 +11,7 @@ import { HeaderLink } from './HeaderLink';
 import { HeaderLinkMore } from './HeaderLinkMore';
 import { HeaderLinks } from './HeaderLinks';
 import { HeaderLogo } from './HeaderLogo';
-import { HeaderMobileMenu } from './HeaderMobileMenu';
+import { HeaderMobileMenuButton } from './HeaderMobileMenuButton';
 import { SpacesDropdown } from './SpacesDropdown';
 
 /**
@@ -76,7 +76,7 @@ export function Header(props: { context: GitBookSiteContext; withTopHeader?: boo
                                 'min-w-0 shrink items-center justify-start gap-2 lg:gap-4'
                             )}
                         >
-                            <HeaderMobileMenu
+                            <HeaderMobileMenuButton
                                 className={tcls(
                                     'lg:hidden',
                                     '-ml-2',

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

@@ -0,0 +1,36 @@
+'use client';
+
+import { Icon } from '@gitbook/icons';
+
+import { useMobileMenuSheet } from '@/components/MobileMenu/useMobileMenuSheet';
+import { tString, useLanguage } from '@/intl/client';
+import { tcls } from '@/lib/tailwind';
+
+/**
+ * Button to show/hide the table of content on mobile.
+ */
+export function HeaderMobileMenuButton(
+    props: Partial<React.ButtonHTMLAttributes<HTMLButtonElement>>
+) {
+    const language = useLanguage();
+    const { open, setOpen } = useMobileMenuSheet();
+
+    const toggleNavigation = () => {
+        setOpen(!open);
+    };
+
+    return (
+        <button
+            {...props}
+            aria-label={tString(language, 'table_of_contents_button_label')}
+            data-testid="mobile-menu-button"
+            onClick={toggleNavigation}
+            className={tcls(
+                'flex flex-row items-center rounded straight-corners:rounded-sm px-2 py-1',
+                props.className
+            )}
+        >
+            <Icon icon="bars" className="size-4 text-inherit" />
+        </button>
+    );
+}

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

@@ -11,15 +11,17 @@ export function SpacesDropdown(props: {
     siteSpace: SiteSpace;
     siteSpaces: SiteSpace[];
     className?: string;
+    withPortal?: boolean;
 }) {
-    const { context, siteSpace, siteSpaces, className } = props;
+    const { context, siteSpace, siteSpaces, className, withPortal } = props;
 
     return (
         <DropdownMenu
             className={tcls(
                 'group-hover/dropdown:invisible', // Prevent hover from opening the dropdown, as it's annoying in this context
                 'group-focus-within/dropdown:group-hover/dropdown:visible' // When the dropdown is already open, it should remain visible when hovered
             )}
+            withPortal={withPortal}
             button={
                 <div
                     data-testid="space-dropdown-button"

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

@@ -0,0 +1,23 @@
+'use client';
+
+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();
+    const { open, setOpen } = useMobileMenuSheet();
+
+    // biome-ignore lint/correctness/useExhaustiveDependencies: Close the navigation when navigating to a page
+    useEffect(() => {
+        setOpen(false);
+    }, [pathname]);
+
+    // Prevent scrolling when the menu is open
+    usePreventScroll({
+        isDisabled: !open,
+    });
+
+    return null;
+}

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

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

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

@@ -0,0 +1,12 @@
+import { create } from 'zustand';
+
+/**
+ * Hooks to manage the mobile menu sheet state.
+ */
+export const useMobileMenuSheet = create<{
+    open: boolean;
+    setOpen: (open: boolean) => void;
+}>((set) => ({
+    open: false,
+    setOpen: (open) => set({ open }),
+}));