less drastic offset

GitbookIO · Dec 18, 2024 · 1b4d94d · 1b4d94d
1 parent d3eef16
commit 1b4d94d
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx b/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx
@@ -1,6 +1,7 @@
 import {
     CustomizationHeaderPreset,
     CustomizationSettings,
+    CustomizationSidebarBackgroundStyle,
     Revision,
     RevisionPageDocument,
     RevisionPageGroup,
@@ -66,6 +67,9 @@ export function SpaceLayout(props: {
     const headerOffset = {
         sectionsHeader: withSections,
         topHeader: withTopHeader,
+        sidebarBackgroundFilled:
+            'sidebar' in customization.styling &&
+            customization.styling.sidebar.background === CustomizationSidebarBackgroundStyle.Filled,
     };
 
     return (

diff --git a/packages/gitbook/src/components/TableOfContents/TableOfContents.tsx b/packages/gitbook/src/components/TableOfContents/TableOfContents.tsx
@@ -16,15 +16,23 @@ import { PagesList } from './PagesList';
 import { TOCScrollContainer } from './TOCScroller';
 import { Trademark } from './Trademark';
 
-function getTopOffset(props: { sectionsHeader: boolean; topHeader: boolean }) {
-    if (props.sectionsHeader && props.topHeader) {
+function getTopOffset(props: {
+    sectionsHeader: boolean;
+    topHeader: boolean;
+    sidebarBackgroundFilled: boolean;
+}) {
+    if (props.topHeader && props.sectionsHeader) {
         return 'lg:top-32 lg:h-[calc(100vh_-_8rem)]';
     }
 
-    if (props.topHeader) {
+    if (props.topHeader && props.sidebarBackgroundFilled) {
         return 'lg:top-24 lg:h-[calc(100vh_-_6rem)]';
     }
 
+    if (props.topHeader && !props.sidebarBackgroundFilled) {
+        return 'lg:top-16 lg:h-[calc(100vh_-_4rem)]';
+    }
+
     return 'lg:top-0 lg:h-[100vh]';
 }
 
@@ -36,7 +44,11 @@ export function TableOfContents(props: {
     pages: Revision['pages'];
     ancestors: Array<RevisionPageDocument | RevisionPageGroup>;
     header?: React.ReactNode; // Displayed outside the scrollable TOC as a sticky header
-    headerOffset: { sectionsHeader: boolean; topHeader: boolean };
+    headerOffset: {
+        sectionsHeader: boolean;
+        topHeader: boolean;
+        sidebarBackgroundFilled: boolean;
+    };
     innerHeader?: React.ReactNode; // Displayed outside the scrollable TOC, directly above the page list
 }) {
     const { innerHeader, space, customization, pages, ancestors, header, context, headerOffset } =