Resolve comments

Author: BrettJephson

packages/gitbook/src/app/(site)/fetch.ts

@@ -21,7 +21,7 @@ export interface PageIdParams {
     pageId: string;
 }
 
-type SectionsList = { list: SiteSection[]; section: SiteSection };
+export type SectionsList = { list: SiteSection[]; section: SiteSection; index: number; };
 
 /**
  * Fetch all the data needed to render the content layout.
@@ -70,7 +70,7 @@ export async function fetchContentData() {
 function parseSiteSectionsList(siteSectionId: string, sections: SiteSection[]) {
     const section = sections.find((section) => section.id === siteSectionId);
     assert(sectionIsDefined(section), 'A section must be defined when there are multiple sections');
-    return { list: sections, section } satisfies SectionsList;
+    return { list: sections, section, index: sections.indexOf(section) } satisfies SectionsList;
 }
 
 function sectionIsDefined(section?: SiteSection): section is NonNullable<SiteSection> {

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

@@ -2,12 +2,12 @@ import {
     CustomizationSettings,
     Site,
     SiteCustomizationSettings,
-    SiteSection,
     Space,
 } from '@gitbook/api';
 import { CustomizationHeaderPreset } from '@gitbook/api';
 import { Suspense } from 'react';
 
+import type { SectionsList } from '@/app/(site)/fetch';
 import { CONTAINER_STYLE, HEADER_HEIGHT_DESKTOP } from '@/components/layout';
 import { t, getSpaceLanguage } from '@/intl/server';
 import { ContentRefContext } from '@/lib/references';
@@ -27,7 +27,7 @@ export function Header(props: {
     space: Space;
     site: Site | null;
     spaces: Space[];
-    sections: { list: SiteSection[]; section: SiteSection } | null;
+    sections: SectionsList | null;
     context: ContentRefContext;
     customization: CustomizationSettings | SiteCustomizationSettings;
     withTopHeader?: boolean;
@@ -153,7 +153,7 @@ export function Header(props: {
                     )}
                 >
                     <div className={tcls(CONTAINER_STYLE)}>
-                        <SiteSectionTabs sections={sections.list} section={sections.section} />
+                        <SiteSectionTabs {...sections} />
                     </div>
                 </div>
             ) : null}

packages/gitbook/src/components/SiteSectionTabs/SiteSectionTabs.tsx

@@ -10,8 +10,8 @@ import { Button, Link } from '../primitives';
 /**
  * A set of navigational tabs representing site sections for multi-section sites
  */
-export function SiteSectionTabs(props: { sections: SiteSection[]; section: SiteSection }) {
-    const { sections, section: currentSection } = props;
+export function SiteSectionTabs(props: { list: SiteSection[]; section: SiteSection; index: number; }) {
+    const { list: sections, section: currentSection, index: currentIndex } = props;
 
     const tabs = sections.map((section) => ({
         id: section.id,
@@ -22,9 +22,6 @@ export function SiteSectionTabs(props: { sections: SiteSection[]; section: SiteS
     const currentTabRef = React.useRef<HTMLAnchorElement>(null);
     const navRef = React.useRef<HTMLDivElement>(null);
 
-    // we don't set the current tab with a click event because the tab will navigate to a different section and trigger a page reload.
-    const currentIndex = sections.findIndex((section) => section.id === currentSection?.id);
-
     const [tabDimensions, setTabDimensions] = React.useState<{
         left: number;
         width: number;

packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx

@@ -6,11 +6,11 @@ import {
     RevisionPageGroup,
     Site,
     SiteCustomizationSettings,
-    SiteSection,
     Space,
 } from '@gitbook/api';
 import React from 'react';
 
+import { SectionsList } from '@/app/(site)/fetch';
 import { Footer } from '@/components/Footer';
 import { CompactHeader, Header } from '@/components/Header';
 import { CONTAINER_STYLE } from '@/components/layout';
@@ -31,7 +31,7 @@ export function SpaceLayout(props: {
     contentTarget: ContentTarget;
     space: Space;
     site: Site | null;
-    sections: { list: SiteSection[]; section: SiteSection } | null;
+    sections: SectionsList | null;
     spaces: Space[];
     customization: CustomizationSettings | SiteCustomizationSettings;
     pages: Revision['pages'];