Add support for no header in customization settings (#3)

* Start hiding header

* Adapt page aside as well

* Revert condition

src/components/Header/CompactHeader.tsx

@@ -0,0 +1,40 @@
+import { Collection, CustomizationSettings, Space } from '@gitbook/api';
+import React from 'react';
+
+import { tcls } from '@/lib/tailwind';
+
+import { HeaderLogo } from './HeaderLogo';
+import { SearchButton } from '../Search';
+
+/**
+ * Header to display on top of the table of contents when the space has no header configured.
+ */
+export function CompactHeader(props: {
+    space: Space;
+    collection: Collection | null;
+    collectionSpaces: Space[];
+    customization: CustomizationSettings;
+}) {
+    const { space, collection, customization } = props;
+
+    return (
+        <div className={tcls('flex', 'flex-row', 'items-center')}>
+            <div className={tcls('flex-1')}>
+                <HeaderLogo
+                    collection={collection}
+                    space={space}
+                    customization={customization}
+                    textStyle={[
+                        'text-header-link-500',
+                        'group-hover/headerlogo:text-header-link-700',
+                    ]}
+                />
+            </div>
+            <div className={tcls(['ms-2'])}>
+                <React.Suspense fallback={null}>
+                    <SearchButton />
+                </React.Suspense>
+            </div>
+        </div>
+    );
+}

src/components/Header/index.ts

@@ -1 +1,2 @@
 export * from './Header';
+export * from './CompactHeader';

src/components/PageAside/PageAside.tsx

@@ -6,12 +6,18 @@ import { t } from '@/lib/intl';
 import { tcls } from '@/lib/tailwind';
 
 import { ScrollSectionsList } from './ScrollSectionsList';
+import { SIDE_COLUMN_WITHOUT_HEADER, SIDE_COLUMN_WITH_HEADER } from '../layout';
 
 /**
  * Aside listing the headings in the document.
  */
-export function PageAside(props: { space: Space; page: RevisionPageDocument; document: any }) {
-    const { space, document } = props;
+export function PageAside(props: {
+    space: Space;
+    page: RevisionPageDocument;
+    document: any;
+    withHeaderOffset: boolean;
+}) {
+    const { space, document, withHeaderOffset } = props;
     const sections = getDocumentSections(document);
 
     return (
@@ -24,8 +30,7 @@ export function PageAside(props: { space: Space; page: RevisionPageDocument; doc
                 'grow-0',
                 'shrink-0',
                 'sticky',
-                'top-16',
-                'h-[calc(100vh-4rem)]',
+                withHeaderOffset ? SIDE_COLUMN_WITH_HEADER : SIDE_COLUMN_WITHOUT_HEADER,
                 'py-6',
             )}
         >

src/components/Search/SearchButton.tsx

@@ -10,7 +10,7 @@ import { useSearch } from './useSearch';
 /**
  * Button to open the search modal.
  */
-export function SearchButton(props: { children: React.ReactNode; style?: ClassValue }) {
+export function SearchButton(props: { children?: React.ReactNode; style?: ClassValue }) {
     const { style, children } = props;
 
     const [, setQuery] = useSearch();
@@ -40,7 +40,7 @@ export function SearchButton(props: { children: React.ReactNode; style?: ClassVa
                 style,
             )}
         >
-            <IconSearch className={tcls('w-4', 'h-4', 'me-2')} />
+            <IconSearch className={tcls('w-4', 'h-4', children ? 'me-2' : null)} />
             {children}
         </button>
     );

src/components/SpaceContent/SpaceContent.tsx

@@ -1,5 +1,6 @@
 import {
     Collection,
+    CustomizationHeaderPreset,
     CustomizationSettings,
     Revision,
     RevisionPageDocument,
@@ -9,7 +10,7 @@ import {
 import React from 'react';
 
 import { Footer } from '@/components/Footer';
-import { Header } from '@/components/Header';
+import { CompactHeader, Header } from '@/components/Header';
 import { CONTAINER_MAX_WIDTH_NORMAL, CONTAINER_PADDING } from '@/components/layout';
 import { PageBody } from '@/components/PageBody';
 import { SearchModal } from '@/components/Search';
@@ -42,19 +43,24 @@ export function SpaceContent(props: {
         ancestors,
         document,
     } = props;
+
     const asFullWidth = hasFullWidthBlock(document);
+    const withTopHeader = customization.header.preset !== CustomizationHeaderPreset.None;
 
     return (
         <div>
-            <Header
-                space={space}
-                collection={collection}
-                collectionSpaces={collectionSpaces}
-                revision={revision}
-                page={page}
-                customization={customization}
-                asFullWidth={asFullWidth}
-            />
+            {withTopHeader ? (
+                <Header
+                    space={space}
+                    collection={collection}
+                    collectionSpaces={collectionSpaces}
+                    revision={revision}
+                    page={page}
+                    customization={customization}
+                    asFullWidth={asFullWidth}
+                />
+            ) : null}
+
             <div
                 className={tcls(
                     'flex',
@@ -68,9 +74,25 @@ export function SpaceContent(props: {
                     revision={revision}
                     activePage={page}
                     ancestors={ancestors}
+                    header={
+                        withTopHeader ? null : (
+                            <CompactHeader
+                                space={space}
+                                collection={collection}
+                                collectionSpaces={collectionSpaces}
+                                customization={customization}
+                            />
+                        )
+                    }
+                    withHeaderOffset={withTopHeader}
                 />
                 <PageBody space={space} revision={revision} page={page} document={document} />
-                <PageAside space={space} page={page} document={document} />
+                <PageAside
+                    space={space}
+                    page={page}
+                    document={document}
+                    withHeaderOffset={withTopHeader}
+                />
             </div>
 
             {customization.themes.toggeable ||

src/components/TableOfContents/TableOfContents.tsx

@@ -1,19 +1,23 @@
 import { Revision, RevisionPageDocument, RevisionPageGroup } from '@gitbook/api';
+import React from 'react';
 
 import { IntlContext } from '@/lib/intl';
 import { tcls } from '@/lib/tailwind';
 
 import { PagesList } from './PagesList';
 import { Trademark } from './Trademark';
+import { SIDE_COLUMN_WITHOUT_HEADER, SIDE_COLUMN_WITH_HEADER } from '../layout';
 
 export function TableOfContents(
     props: IntlContext & {
         revision: Revision;
         activePage: RevisionPageDocument;
         ancestors: Array<RevisionPageDocument | RevisionPageGroup>;
+        header?: React.ReactNode;
+        withHeaderOffset?: boolean;
     },
 ) {
-    const { space, revision, activePage, ancestors } = props;
+    const { space, revision, activePage, ancestors, header, withHeaderOffset = false } = props;
 
     return (
         <aside
@@ -25,13 +29,21 @@ export function TableOfContents(
                 'grow-0',
                 'shrink-0',
                 'sticky',
-                'top-16',
-                'h-[calc(100vh-4rem)]',
+                withHeaderOffset ? SIDE_COLUMN_WITH_HEADER : SIDE_COLUMN_WITHOUT_HEADER,
                 'border-r',
                 'border-slate-200',
             )}
         >
-            <div className={tcls('flex-1', 'overflow-y-auto', 'pt-6', 'pb-14', 'pr-4')}>
+            {header ? <div className={tcls('pt-6', 'pb-3', 'pr-4')}>{header}</div> : null}
+            <div
+                className={tcls(
+                    'flex-1',
+                    'overflow-y-auto',
+                    header ? 'pt-3' : 'pt-6',
+                    'pb-14',
+                    'pr-4',
+                )}
+            >
                 <PagesList pages={revision.pages} activePage={activePage} ancestors={ancestors} />
             </div>
             <Trademark space={space} />

src/components/layout.ts

@@ -9,3 +9,9 @@ export const CONTAINER_MAX_WIDTH_NORMAL = 'max-w-screen-2xl';
  * Padding of the container.
  */
 export const CONTAINER_PADDING: ClassValue = ['px-4 sm:px-6 md:px-8'];
+
+/**
+ * Side column positioning, with and without a header.
+ */
+export const SIDE_COLUMN_WITH_HEADER: ClassValue = ['top-16', 'h-[calc(100vh-4rem)]'];
+export const SIDE_COLUMN_WITHOUT_HEADER: ClassValue = ['top-0', 'h-screen'];