Add isRoot prop to PagesList for root header offset (#3759)

Author: conico974

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

@@ -7,14 +7,14 @@ import { tcls } from '@/lib/tailwind';
 import { PagesList } from './PagesList';
 import { TOCPageIcon } from './TOCPageIcon';
 
-export function PageGroupItem(props: { page: ClientTOCPageGroup }) {
-    const { page } = props;
+export function PageGroupItem(props: { page: ClientTOCPageGroup; isFirst?: boolean }) {
+    const { page, isFirst } = props;
 
     return (
-        <li className="group/page-group-item flex flex-col">
+        <li className="flex flex-col">
             <div
                 className={tcls(
-                    '-top-6 group-first/page-group-item:-mt-6 sticky z-1 flex items-center gap-3 px-3 pt-6',
+                    '-top-6 sticky z-1 flex items-center gap-3 px-3 pt-6',
                     'font-semibold text-xs uppercase tracking-wide',
                     'pb-3', // Add extra padding to make the header fade a bit nicer
                     '-mb-1.5', // Then pull the page items a bit closer, effective bottom padding is 1.5 units / 6px.
@@ -26,7 +26,8 @@ export function PageGroupItem(props: { page: ClientTOCPageGroup }) {
                     '[html.sidebar-filled.theme-muted_&]:bg-tint-base',
                     '[html.sidebar-filled.theme-bold.tint_&]:bg-tint-base',
                     '[html.sidebar-default.theme-gradient_&]:bg-gradient-primary',
-                    '[html.sidebar-default.theme-gradient.tint_&]:bg-gradient-tint'
+                    '[html.sidebar-default.theme-gradient.tint_&]:bg-gradient-tint',
+                    isFirst ? '-mt-6' : ''
                 )}
             >
                 <TOCPageIcon page={page} />

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

@@ -9,12 +9,16 @@ import { PageDocumentItem } from './PageDocumentItem';
 import { PageGroupItem } from './PageGroupItem';
 import { PageLinkItem } from './PageLinkItem';
 
-export function PagesList(props: { pages: ClientTOCPage[]; style?: ClassValue }) {
-    const { pages, style } = props;
+export function PagesList(props: {
+    pages: ClientTOCPage[];
+    style?: ClassValue;
+    isRoot?: boolean;
+}) {
+    const { pages, style, isRoot = false } = props;
 
     return (
         <ul className={tcls('flex flex-col gap-y-0.5', style)}>
-            {pages.map((page) => {
+            {pages.map((page, idx) => {
                 switch (page.type) {
                     case 'document':
                         return <PageDocumentItem key={page.id} page={page} />;
@@ -23,7 +27,13 @@ export function PagesList(props: { pages: ClientTOCPage[]; style?: ClassValue })
                         return <PageLinkItem key={page.id} page={page} />;
 
                     case 'group':
-                        return <PageGroupItem key={page.id} page={page} />;
+                        return (
+                            <PageGroupItem
+                                key={page.id}
+                                page={page}
+                                isFirst={isRoot && idx === 0}
+                            />
+                        );
 
                     default:
                         assertNever(page);

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

@@ -111,6 +111,7 @@ export async function TableOfContents(props: {
                     >
                         <PagesList
                             pages={pages}
+                            isRoot={true}
                             style="page-no-toc:hidden border-tint-subtle sidebar-list-line:border-l"
                         />
                         {customization.trademark.enabled ? (