From 8a9f163d31dc9b25351cb679c1dca7a54ef10a69 Mon Sep 17 00:00:00 2001
From: Nicolas Dorseuil <nicolas@gitbook.io>
Date: Wed, 24 Jun 2026 20:14:18 +0200
Subject: [PATCH] Add SiteSectionList to StructurePreviewVariantSelector for
 improved section display

---
 .../SiteSections/SiteSectionList.tsx          |  1 +
 .../StructurePreview/StructurePreview.tsx     | 28 +++++++++++++------
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/packages/gitbook/src/components/SiteSections/SiteSectionList.tsx b/packages/gitbook/src/components/SiteSections/SiteSectionList.tsx
index 399525a07..b66b4076d 100644
--- a/packages/gitbook/src/components/SiteSections/SiteSectionList.tsx
+++ b/packages/gitbook/src/components/SiteSections/SiteSectionList.tsx
@@ -82,6 +82,7 @@ export function SiteSectionListItem(props: {
             href={section.url}
             aria-current={isActive && 'page'}
             id={section.id}
+            data-gb-site-section-id={section.id}
             className={tcls(
                 'group/section-link',
                 'flex',
diff --git a/packages/gitbook/src/components/StructurePreview/StructurePreview.tsx b/packages/gitbook/src/components/StructurePreview/StructurePreview.tsx
index f7bc86ad5..685c6d5c8 100644
--- a/packages/gitbook/src/components/StructurePreview/StructurePreview.tsx
+++ b/packages/gitbook/src/components/StructurePreview/StructurePreview.tsx
@@ -9,7 +9,7 @@ import {
 import type { IconName } from '@gitbook/icons';
 import * as React from 'react';
 
-import { SiteSectionTabs } from '@/components/SiteSections';
+import { SiteSectionList, SiteSectionTabs } from '@/components/SiteSections';
 import {
     TABLE_OF_CONTENTS_SPACES_DROPDOWN_CLASS,
     getTableOfContentsClassName,
@@ -356,18 +356,30 @@ function StructurePreviewSearch() {
 
 function StructurePreviewVariantSelector(props: { snapshot: StructurePreviewSnapshot }) {
     const { snapshot } = props;
-    const { variants } = snapshot;
+    const { customization, sections, variants } = snapshot;
+    const withTopHeader = customization.header.preset !== CustomizationHeaderPreset.None;
+    const withSections = Boolean(
+        sections &&
+            (sections.list.length > 1 ||
+                sections.list.some((section) => section.object === 'site-section-group'))
+    );
+    const withSidebarHeader = (!withTopHeader && withSections) || variants.generic.length > 1;
 
     return (
         <div data-gb-table-of-contents className={tcls(getTableOfContentsClassName(), 'max-w-xs')}>
             <div className={getTableOfContentsSidebarClassName()}>
-                {variants.generic.length > 1 ? (
+                {withSidebarHeader ? (
                     <div className={getTableOfContentsInnerHeaderClassName()}>
-                        <StructurePreviewSpacesDropdown
-                            title={snapshot.siteSpace.title}
-                            siteSpaces={variants.generic}
-                            className={TABLE_OF_CONTENTS_SPACES_DROPDOWN_CLASS}
-                        />
+                        {!withTopHeader && withSections && sections ? (
+                            <SiteSectionList className="hidden lg:block" sections={sections} />
+                        ) : null}
+                        {variants.generic.length > 1 ? (
+                            <StructurePreviewSpacesDropdown
+                                title={snapshot.siteSpace.title}
+                                siteSpaces={variants.generic}
+                                className={TABLE_OF_CONTENTS_SPACES_DROPDOWN_CLASS}
+                            />
+                        ) : null}
                     </div>
                 ) : null}
                 <div className="ml-5 flex flex-col gap-6">