Fix header offset (#2812)

Author: zenoachtig

.changeset/khaki-bags-shout.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Improve header offset

packages/gitbook/src/components/DocumentView/OpenAPI/style.css

@@ -128,7 +128,7 @@
 }
 
 .openapi-column-preview-body {
-    @apply flex flex-col gap-4 sticky top-4 space-header:top-20 page-api-block:xl:max-2xl:top-32 print-mode:static;
+    @apply flex flex-col gap-4 sticky top-4 site-header:top-20 site-header-sections:top-32 page-api-block:xl:max-2xl:top-32 print-mode:static;
 }
 
 .openapi-column-preview pre {

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

@@ -36,6 +36,7 @@ export function Header(props: {
 
     return (
         <header
+            id="site-header"
             className={tcls(
                 'flex',
                 'flex-col',
@@ -50,7 +51,7 @@ export function Header(props: {
                 'bg-tint-base/9',
                 '[html.tint.sidebar-filled_&]:bg-tint-subtle/9',
                 'contrast-more:bg-tint-base',
-                withTopHeader ? null : 'lg:hidden',
+                withTopHeader ? null : 'lg:hidden mobile-only',
                 'text-sm',
                 'backdrop-blur-lg',
             )}

packages/gitbook/src/components/PageAside/PageAside.tsx

@@ -24,30 +24,6 @@ import { Ad } from '../Ads';
 import { PageFeedbackForm } from '../PageFeedback';
 import { ThemeToggler } from '../ThemeToggler';
 
-function getTopOffset(props: { sectionsHeader: boolean; topHeader: boolean }) {
-    if (props.topHeader && props.sectionsHeader) {
-        return 'lg:top-[6.75rem]';
-    }
-
-    if (props.topHeader) {
-        return 'lg:top-16';
-    }
-
-    return 'lg:top-0';
-}
-
-function getMaxHeight(props: { sectionsHeader: boolean; topHeader: boolean }) {
-    if (props.topHeader && props.sectionsHeader) {
-        return 'lg:max-h-[calc(100vh_-_6.75rem)]';
-    }
-
-    if (props.topHeader) {
-        return 'lg:max-h-[calc(100vh_-_4rem)]';
-    }
-
-    return 'lg:max-h-screen';
-}
-
 /**
  * Aside listing the headings in the document.
  */
@@ -62,20 +38,9 @@ export async function PageAside(props: {
     withFullPageCover: boolean;
     withPageFeedback: boolean;
 }) {
-    const {
-        space,
-        site,
-        page,
-        document,
-        customization,
-        withHeaderOffset,
-        withPageFeedback,
-        context,
-    } = props;
+    const { space, site, page, document, customization, withPageFeedback, context } = props;
     const language = getSpaceLanguage(customization);
 
-    const topOffset = getTopOffset(withHeaderOffset);
-    const maxHeight = getMaxHeight(withHeaderOffset);
     const pdfHref = await getAbsoluteHref(
         `~gitbook/pdf?${getPDFUrlSearchParams({
             page: page.id,
@@ -97,8 +62,17 @@ export async function PageAside(props: {
                 'text-tint',
                 'contrast-more:text-tint-strong',
                 'sticky',
-                topOffset,
-                maxHeight,
+                // Without header
+                'lg:top:0',
+                'lg:max-h-screen',
+
+                // With header
+                'site-header:lg:top-16',
+                'site-header:lg:max-h-[calc(100vh_-_4rem)]',
+
+                // With header & sections
+                'site-header-sections:lg:top-[6.75rem]',
+                'site-header-sections:lg:max-h-[calc(100vh_-_6.75rem)]',
 
                 // When in api page mode, we display it as an overlay on non-large resolutions
                 'page-api-block:xl:max-2xl:z-10',
@@ -158,7 +132,9 @@ export async function PageAside(props: {
                             'pb-12',
 
                             'sticky',
-                            topOffset,
+                            'lg:top:0',
+                            'site-header:lg:top-16',
+                            'site-header-sections:lg:top-[6.75rem]',
 
                             'gap-6',
                             'pt-8',

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

@@ -17,18 +17,6 @@ import { PagesList } from './PagesList';
 import { TOCScrollContainer } from './TOCScroller';
 import { Trademark } from './Trademark';
 
-function getTopOffset(props: { sectionsHeader: boolean; topHeader: boolean }) {
-    if (props.topHeader && props.sectionsHeader) {
-        return 'lg:top-[6.75rem] lg:h-[calc(100vh_-_6.75rem)]';
-    }
-
-    if (props.topHeader) {
-        return 'lg:top-16 lg:h-[calc(100vh_-_4rem)]';
-    }
-
-    return 'lg:top-0 lg:h-screen';
-}
-
 export function TableOfContents(props: {
     space: Space;
     customization: CustomizationSettings | SiteCustomizationSettings;
@@ -46,8 +34,6 @@ export function TableOfContents(props: {
     const { innerHeader, space, customization, pages, ancestors, header, context, headerOffset } =
         props;
 
-    const topOffset = getTopOffset(headerOffset);
-
     return (
         <aside // Sidebar container, responsible for setting the right dimensions and position for the sidebar.
             data-testid="table-of-contents"
@@ -61,11 +47,19 @@ export function TableOfContents(props: {
                 'lg:basis-72',
 
                 'relative',
-                'lg:sticky',
-                'top-0',
-                'h-screen',
-                topOffset,
                 'z-[1]',
+                'lg:sticky',
+                // Without header
+                'lg:top-0',
+                'lg:h-screen',
+
+                // With header
+                'site-header:lg:top-16',
+                'site-header:lg:h-[calc(100vh_-_4rem)]',
+
+                // With header and sections
+                'site-header-sections:lg:top-[6.75rem]',
+                'site-header-sections:lg:h-[calc(100vh_-_6.75rem)]',
 
                 'pt-6',
                 'pb-4',

packages/gitbook/tailwind.config.ts

@@ -362,7 +362,8 @@ const config: Config = {
             /**
              * Variant when a header is displayed.
              */
-            addVariant('space-header', 'body:has(header) &');
+            addVariant('site-header', 'body:has(#site-header:not(.mobile-only)) &');
+            addVariant('site-header-sections', 'body:has(#site-header:not(.mobile-only) > nav) &');
 
             /**
              * Variant for sidebar styles