From 462b2b6e657aae8cd069ae87deccb64e40700d33 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Samy=20Pess=C3=A9?= Date: Mon, 13 Nov 2023 22:08:29 +0100 Subject: [PATCH] Add support for no header in customization settings (#3) * Start hiding header * Adapt page aside as well * Revert condition --- src/components/Header/CompactHeader.tsx | 40 +++++++++++++++++ src/components/Header/index.ts | 1 + src/components/PageAside/PageAside.tsx | 13 ++++-- src/components/Search/SearchButton.tsx | 4 +- src/components/SpaceContent/SpaceContent.tsx | 44 ++++++++++++++----- .../TableOfContents/TableOfContents.tsx | 20 +++++++-- src/components/layout.ts | 6 +++ 7 files changed, 107 insertions(+), 21 deletions(-) create mode 100644 src/components/Header/CompactHeader.tsx diff --git a/src/components/Header/CompactHeader.tsx b/src/components/Header/CompactHeader.tsx new file mode 100644 index 000000000..1a1735e47 --- /dev/null +++ b/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 ( +
+
+ +
+
+ + + +
+
+ ); +} diff --git a/src/components/Header/index.ts b/src/components/Header/index.ts index 266dec8a1..b6e6bbfc0 100644 --- a/src/components/Header/index.ts +++ b/src/components/Header/index.ts @@ -1 +1,2 @@ export * from './Header'; +export * from './CompactHeader'; diff --git a/src/components/PageAside/PageAside.tsx b/src/components/PageAside/PageAside.tsx index 6620b9541..934abb716 100644 --- a/src/components/PageAside/PageAside.tsx +++ b/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', )} > diff --git a/src/components/Search/SearchButton.tsx b/src/components/Search/SearchButton.tsx index 990fb9d54..8368ef324 100644 --- a/src/components/Search/SearchButton.tsx +++ b/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, )} > - + {children} ); diff --git a/src/components/SpaceContent/SpaceContent.tsx b/src/components/SpaceContent/SpaceContent.tsx index 73133bbb4..d03426681 100644 --- a/src/components/SpaceContent/SpaceContent.tsx +++ b/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 (
-
+ {withTopHeader ? ( +
+ ) : null} +
+ ) + } + withHeaderOffset={withTopHeader} /> - +
{customization.themes.toggeable || diff --git a/src/components/TableOfContents/TableOfContents.tsx b/src/components/TableOfContents/TableOfContents.tsx index 5bc33d502..b83eb5829 100644 --- a/src/components/TableOfContents/TableOfContents.tsx +++ b/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; + header?: React.ReactNode; + withHeaderOffset?: boolean; }, ) { - const { space, revision, activePage, ancestors } = props; + const { space, revision, activePage, ancestors, header, withHeaderOffset = false } = props; return (