Make sidesheet work well in docs embed

Author: zenoachtig

packages/gitbook/src/app/sites/dynamic/[mode]/[siteURL]/[siteData]/(content)/layout.tsx

@@ -23,7 +23,8 @@ export default async function SiteDynamicLayout({
 
     return (
         <CustomizationRootLayout
-            className="site-background"
+            htmlClassName="sheet-open:gutter-stable"
+            bodyClassName="site-background"
             forcedTheme={forcedTheme}
             context={context}
         >

packages/gitbook/src/app/sites/static/[mode]/[siteURL]/[siteData]/(content)/layout.tsx

@@ -19,7 +19,11 @@ export default async function SiteStaticLayout({
     const withTracking = shouldTrackEvents();
 
     return (
-        <CustomizationRootLayout className="site-background" context={context}>
+        <CustomizationRootLayout
+            htmlClassName="sheet-open:gutter-stable"
+            bodyClassName="site-background"
+            context={context}
+        >
             <SiteLayout
                 context={context}
                 withTracking={withTracking}

packages/gitbook/src/components/AIChat/AIChat.tsx

@@ -86,7 +86,7 @@ export function AIChat() {
                 'ai-chat mx-auto not-hydrated:hidden w-96 max-w-full pl-8 transition-[width] duration-300 ease-quint lg:max-xl:w-80'
             )}
         >
-            <EmbeddableFrame className="relative shrink-0 border-tint-subtle border-l to-tint-base transition-all duration-300 max-lg:circular-corners:rounded-3xl max-lg:rounded-corners:rounded-md max-lg:border lg:w-80 xl:w-96">
+            <EmbeddableFrame className="relative shrink-0 border-tint-subtle border-l to-tint-base">
                 <EmbeddableFrameMain>
                     <EmbeddableFrameHeader>
                         <AIChatDynamicIcon trademark={config.trademark} />

packages/gitbook/src/components/Embeddable/EmbeddableDocsPage.tsx

@@ -79,7 +79,7 @@ export async function EmbeddableDocsPage(props: EmbeddableDocsPageProps) {
                         contentClassName="p-4"
                         fadeEdges={context.sections ? [] : ['leading']}
                     >
-                        <TableOfContents className="pt-0" context={context} />
+                        <TableOfContents context={context} />
                         <PageBody
                             context={context}
                             page={page}

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

@@ -1,41 +1,20 @@
 'use client';
 import { usePathname } from 'next/navigation';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect } from 'react';
 
 import { tString, useLanguage } from '@/intl/client';
 
-import { useScrollListener } from '../hooks/useScrollListener';
 import { Button, type ButtonProps } from '../primitives';
 
 const globalClassName = 'navigation-open';
 
-const SCROLL_DISTANCE = 320;
-
 /**
  * Button to show/hide the table of content on mobile.
  */
 export function HeaderMobileMenu(props: ButtonProps) {
     const language = useLanguage();
 
     const pathname = usePathname();
-    const hasScrollRef = useRef(false);
-
-    const [isOpen, setIsOpen] = useState(false);
-
-    const toggleNavigation = () => {
-        if (!hasScrollRef.current && document.body.classList.contains(globalClassName)) {
-            document.body.classList.remove(globalClassName);
-            setIsOpen(false);
-        } else {
-            document.body.classList.add(globalClassName);
-            setIsOpen(true);
-        }
-    };
-
-    const windowRef = useRef(typeof window === 'undefined' ? null : window);
-    useScrollListener(() => {
-        hasScrollRef.current = window.scrollY >= SCROLL_DISTANCE;
-    }, windowRef);
 
     // Close the navigation when navigating to a page
     useEffect(() => {
@@ -49,8 +28,10 @@ export function HeaderMobileMenu(props: ButtonProps) {
             variant="blank"
             size="default"
             label={tString(language, 'table_of_contents_button_label')}
-            onClick={toggleNavigation}
-            active={isOpen}
+            onClick={() => {
+                document.body.classList.toggle(globalClassName);
+            }}
+            // Since the button is hidden behind the TOC after toggling, we don't need to keep track of its active state.
             {...props}
         />
     );

packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx

@@ -57,13 +57,15 @@ function preloadFont(fontData: FontData) {
  * It takes care of setting the theme and the language.
  */
 export async function CustomizationRootLayout(props: {
+    /** The class name to apply to the html element. */
+    htmlClassName?: string;
     /** The class name to apply to the body element. */
-    className?: string;
+    bodyClassName?: string;
     forcedTheme?: CustomizationThemeMode | null;
     context: GitBookAnyContext;
     children: React.ReactNode;
 }) {
-    const { className, context, forcedTheme, children } = props;
+    const { htmlClassName, bodyClassName, context, forcedTheme, children } = props;
     const customization =
         'customization' in context ? context.customization : defaultCustomization();
 
@@ -91,7 +93,6 @@ export async function CustomizationRootLayout(props: {
             suppressHydrationWarning
             lang={customization.internationalization.locale}
             className={tcls(
-                'sheet-open:gutter-stable',
                 customization.styling.corners && `${customization.styling.corners}-corners`,
                 'theme' in customization.styling && `theme-${customization.styling.theme}`,
                 tintColor ? ' tint' : 'no-tint',
@@ -108,7 +109,8 @@ export async function CustomizationRootLayout(props: {
                 // Set the dark/light class statically to avoid flashing and make it work when JS is disabled
                 (forcedTheme ?? customization.themes.default) === CustomizationThemeMode.Dark
                     ? 'dark'
-                    : ''
+                    : '',
+                htmlClassName
             )}
         >
             <head>
@@ -180,7 +182,7 @@ export async function CustomizationRootLayout(props: {
                     }
                 `}</style>
             </head>
-            <body className={tcls(className, 'sheet-open:overflow-hidden')}>
+            <body className={tcls(bodyClassName, 'sheet-open:overflow-hidden')}>
                 <IconsProvider
                     assetsURL={GITBOOK_ICONS_URL}
                     assetsURLToken={GITBOOK_ICONS_TOKEN}

packages/gitbook/src/components/primitives/HoverCard.tsx

@@ -28,7 +28,7 @@ export function HoverCard(
         <RadixHoverCard.Portal>
             <RadixHoverCard.Content
                 side={props.side ?? 'top'}
-                className="pointer-events-none z-40 w-screen max-w-md animate-scale-in px-4 data-[state='closed']:animate-scale-out sm:w-auto"
+                className="pointer-events-none z-50 w-screen max-w-md animate-scale-in px-4 data-[state='closed']:animate-scale-out sm:w-auto"
             >
                 <div
                     className={tcls(

packages/gitbook/src/components/primitives/SideSheet.tsx

@@ -110,9 +110,9 @@ export function SideSheet(
 
     return (
         <>
-            {isModal && withScrim ? (
+            {withScrim ? (
                 <SideSheetScrim
-                    className={isOpen ? '' : 'hidden opacity-0 backdrop-blur-none'}
+                    className={tcls(isModal && isOpen ? '' : 'hidden opacity-0 backdrop-blur-none')}
                     onClick={handleClose}
                 />
             ) : null}
@@ -138,11 +138,11 @@ export function SideSheet(
                 {...rest}
             >
                 {children}
-                {isModal && withCloseButton ? (
+                {withCloseButton ? (
                     <SideSheetCloseButton
                         className={tcls(
                             side === 'left' ? 'left-full ml-4' : 'right-full mr-4',
-                            isOpen ? 'animate-blur-in' : 'hidden animate-blur-out'
+                            isModal && isOpen ? 'animate-blur-in' : 'hidden animate-blur-out'
                         )}
                         onClick={handleClose}
                     />