Improving the new tabs (#2537)

Author: BrettJephson

.changeset/wet-houses-grab.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Improving the look and feel of new section tabs

packages/gitbook/src/app/(site)/(content)/[[...pathname]]/page.tsx

@@ -29,6 +29,7 @@ export default async function Page(props: {
     const {
         content: contentPointer,
         contentTarget,
+        sections,
         space,
         site,
         customization,
@@ -72,6 +73,9 @@ export default async function Page(props: {
         page,
     };
 
+    const withSections = Boolean(sections && sections.length > 0);
+    const headerOffset = { sectionsHeader: withSections, topHeader: withTopHeader };
+
     return (
         <>
             {withFullPageCover && page.cover ? (
@@ -86,7 +90,7 @@ export default async function Page(props: {
                         customization={customization}
                         page={page}
                         document={document}
-                        withHeaderOffset={withTopHeader}
+                        withHeaderOffset={headerOffset}
                         withFullPageCover={withFullPageCover}
                         withPageFeedback={withPageFeedback}
                         context={contentRefContext}

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

@@ -23,8 +23,9 @@ export function Header(props: {
     context: ContentRefContext;
     customization: CustomizationSettings | SiteCustomizationSettings;
     withTopHeader?: boolean;
+    children?: React.ReactNode;
 }) {
-    const { context, space, site, spaces, customization, withTopHeader } = props;
+    const { children, context, space, site, spaces, customization, withTopHeader } = props;
     const isCustomizationDefault =
         customization.header.preset === CustomizationHeaderPreset.Default;
     const isMultiVariants = site && spaces.length > 1;
@@ -33,7 +34,7 @@ export function Header(props: {
         <header
             className={tcls(
                 'flex',
-                'flex-row',
+                'flex-col',
                 `h-[${HEADER_HEIGHT_DESKTOP}px]`,
                 'sticky',
                 'top-0',
@@ -133,6 +134,7 @@ export function Header(props: {
                     </div>
                 </div>
             </div>
+            {children}
         </header>
     );
 }

packages/gitbook/src/components/PageAside/PageAside.tsx

@@ -22,6 +22,16 @@ import { ScrollSectionsList } from './ScrollSectionsList';
 import { Ad } from '../Ads';
 import { PageFeedbackForm } from '../PageFeedback';
 
+function getTopOffset(props: { sectionsHeader: boolean; topHeader: boolean }) {
+    if (props.sectionsHeader && props.topHeader) {
+        return 'lg:max-h-[calc(100vh_-_8rem)] top-32 page-api-block:xl:max-2xl:top-32';
+    }
+    if (props.sectionsHeader || props.topHeader) {
+        return 'lg:max-h-[calc(100vh_-_4rem)] top-16 page-api-block:xl:max-2xl:top-16';
+    }
+    return 'lg:max-h-screen top-0 page-api-block:xl:max-2xl:top-0';
+}
+
 /**
  * Aside listing the headings in the document.
  */
@@ -32,7 +42,7 @@ export function PageAside(props: {
     page: RevisionPageDocument;
     document: JSONDocument | null;
     context: ContentRefContext;
-    withHeaderOffset: boolean;
+    withHeaderOffset: { sectionsHeader: boolean; topHeader: boolean };
     withFullPageCover: boolean;
     withPageFeedback: boolean;
 }) {
@@ -48,6 +58,7 @@ export function PageAside(props: {
     } = props;
     const language = getSpaceLanguage(customization);
 
+    const topOffset = getTopOffset(withHeaderOffset);
     return (
         <aside
             className={tcls(
@@ -62,10 +73,8 @@ export function PageAside(props: {
                 'py-8',
                 'break-anywhere', // To prevent long words in headings from breaking the layout
                 'lg:h-full',
-                withHeaderOffset ? 'lg:max-h-[calc(100vh_-_4rem)]' : 'lg:max-h-[100vh]',
-                withHeaderOffset ? 'top-16' : 'top-0',
                 'h-[100vh]',
-
+                'page-api-block:xl:max-2xl:z-[1]',
                 // When in api page mode, we display it as an overlay on non-large resolutions
                 'page-api-block:xl:max-2xl:backdrop-blur-md',
                 'page-api-block:xl:max-2xl:fixed',
@@ -77,9 +86,7 @@ export function PageAside(props: {
                 'page-api-block:xl:max-2xl:py-0',
                 'page-api-block:xl:max-2xl:mt-3',
                 'dark:page-api-block:xl:max-2xl:bg-dark-2/8',
-                withHeaderOffset
-                    ? 'page-api-block:xl:max-2xl:top-16'
-                    : 'page-api-block:xl:max-2xl:top-0',
+                topOffset,
             )}
         >
             <div

…nents/SiteSectionTabs/SiteSectionTab.tsx …ents/SiteSectionTabs/SiteSectionTabs.tsxpackages/gitbook/src/components/SiteSectionTabs/SiteSectionTab.tsx renamed to packages/gitbook/src/components/SiteSectionTabs/SiteSectionTabs.tsx packages/gitbook/src/components/SiteSectionTabs/SiteSectionTab.tsx renamed to packages/gitbook/src/components/SiteSectionTabs/SiteSectionTabs.tsx

@@ -23,7 +23,7 @@ export function SiteSectionTabs(props: { sections: SiteSection[]; section: SiteS
     const navRef = React.useRef<HTMLDivElement>(null);
 
     const [currentIndex, setCurrentIndex] = React.useState(
-        sections.findIndex((section) => section.id === currentSection?.id) || 0,
+        sections.findIndex((section) => section.id === currentSection?.id),
     );
     const [tabDimensions, setTabDimensions] = React.useState<{
         left: number;
@@ -57,8 +57,9 @@ export function SiteSectionTabs(props: { sections: SiteSection[]; section: SiteS
 
     return tabs.length > 0 ? (
         <nav
+            aria-label="Sections"
             ref={navRef}
-            className="sm:mx-0 md:-mx-2 flex flex-nowrap items-center my-4 max-w-screen"
+            className="flex flex-nowrap items-center max-w-screen mb-px"
             style={
                 {
                     '--tab-scale': `${scale}`,
@@ -68,9 +69,9 @@ export function SiteSectionTabs(props: { sections: SiteSection[]; section: SiteS
         >
             <div
                 className={tcls(
-                    'relative flex gap-2',
+                    'relative flex gap-2 bg-transparent',
                     /* add a pseudo element for active tab indicator */
-                    "after:block after:content-[''] after:origin-left after:absolute after:bottom-0 after:left-0 after:scale-x-[--tab-scale] after:transition-transform after:translate-x-[var(--tab-start)] after:h-0.5 after:w-[100px] after:bg-primary dark:after:bg-primary-500",
+                    "after:block after:content-[''] after:origin-left after:absolute after:-bottom-px after:left-0 after:scale-x-[--tab-scale] after:transition-transform after:translate-x-[var(--tab-start)] after:h-0.5 after:w-[100px] after:bg-primary dark:after:bg-primary-500",
                 )}
                 role="tablist"
             >
@@ -80,9 +81,6 @@ export function SiteSectionTabs(props: { sections: SiteSection[]; section: SiteS
                         key={index + tab.path}
                         label={tab.label}
                         href={tab.path}
-                        onClick={() => {
-                            setCurrentIndex(index);
-                        }}
                         ref={currentIndex === index ? currentTabRef : null}
                     />
                 ))}
@@ -96,27 +94,25 @@ export function SiteSectionTabs(props: { sections: SiteSection[]; section: SiteS
  * The tab item - a link to a site section
  */
 const Tab = React.forwardRef<
-    HTMLAnchorElement,
-    { active: boolean; href: string; label: string; onClick: any }
+    HTMLSpanElement,
+    { active: boolean; href: string; label: string; onClick?: () => void }
 >(function Tab(props, ref) {
     const { active, href, label, onClick } = props;
     return (
-        <div
+        <Link
             className={tcls(
-                'my-0.5 px-2 py-1 rounded',
-                !active && 'hover:bg-dark/1 dark:hover:bg-light/2 transition-colors',
+                'px-3 py-3.5 rounded',
+                active && 'text-primary dark:text-primary-500',
+                !active && 'hover:text-primary dark:hover:text-primary-500 transition-colors',
             )}
+            role="tab"
+            href={href}
+            onClick={onClick}
         >
-            <Link
-                ref={ref}
-                onClick={onClick}
-                className={tcls('inline-flex w-full truncate')}
-                role="tab"
-                href={href}
-            >
+            <span ref={ref} className={tcls('inline-flex w-full truncate')}>
                 {label}
-            </Link>
-        </div>
+            </span>
+        </Link>
     );
 });
 

packages/gitbook/src/components/SiteSectionTabs/index.ts

@@ -1 +1 @@
-export * from './SiteSectionTab';
+export * from './SiteSectionTabs';

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

@@ -60,6 +60,9 @@ export function SpaceLayout(props: {
         pages,
     };
 
+    const withSections = Boolean(sections && sections.list.length > 0);
+    const headerOffset = { sectionsHeader: withSections, topHeader: withTopHeader };
+
     return (
         <>
             {/* <ColorDebugger /> */}
@@ -70,13 +73,20 @@ export function SpaceLayout(props: {
                 spaces={spaces}
                 context={contentRefContext}
                 customization={customization}
-            />
-            <div className={tcls('scroll-nojump')}>
+            >
                 {sections ? (
-                    <div className={tcls(CONTAINER_STYLE)}>
-                        <SiteSectionTabs sections={sections.list} section={sections.section} />
+                    <div
+                        className={tcls(
+                            'w-full shadow-thintop dark:shadow-light/1 bg-light dark:bg-dark z-[9] mt-0.5',
+                        )}
+                    >
+                        <div className={tcls(CONTAINER_STYLE)}>
+                            <SiteSectionTabs sections={sections.list} section={sections.section} />
+                        </div>
                     </div>
                 ) : null}
+            </Header>
+            <div className={tcls('scroll-nojump')}>
                 <div
                     className={tcls(
                         'flex',
@@ -106,7 +116,7 @@ export function SpaceLayout(props: {
                                 />
                             )
                         }
-                        withHeaderOffset={withTopHeader}
+                        headerOffset={headerOffset}
                     />
                     <div className={tcls('flex-1', 'flex', 'flex-col')}>{children}</div>
                 </div>

packages/gitbook/src/components/TableOfContents/TableOfContents.tsx

@@ -16,6 +16,16 @@ import { PagesList } from './PagesList';
 import { TOCScrollContainer } from './TOCScroller';
 import { Trademark } from './Trademark';
 
+function getTopOffset(props: { sectionsHeader: boolean; topHeader: boolean }) {
+    if (props.sectionsHeader && props.topHeader) {
+        return 'lg:top-32 lg:h-[calc(100vh_-_8rem)]';
+    }
+    if (props.sectionsHeader || props.topHeader) {
+        return 'lg:top-16 lg:h-[calc(100vh_-_4rem)]';
+    }
+    return 'lg:top-0 lg:h-[100vh]';
+}
+
 export function TableOfContents(props: {
     space: Space;
     customization: CustomizationSettings | SiteCustomizationSettings;
@@ -24,9 +34,12 @@ export function TableOfContents(props: {
     pages: Revision['pages'];
     ancestors: Array<RevisionPageDocument | RevisionPageGroup>;
     header?: React.ReactNode;
-    withHeaderOffset: boolean;
+    headerOffset: { sectionsHeader: boolean; topHeader: boolean };
 }) {
-    const { space, customization, pages, ancestors, header, context, withHeaderOffset } = props;
+    const { space, customization, pages, ancestors, header, context, headerOffset } = props;
+
+    const withHeaderOffset = headerOffset.sectionsHeader || headerOffset.topHeader;
+    const topOffset = getTopOffset(headerOffset);
 
     return (
         <aside
@@ -50,9 +63,8 @@ export function TableOfContents(props: {
                 'lg:sticky',
                 'dark:bg-dark',
                 'dark:navigation-open:shadow-light/2',
-                withHeaderOffset ? 'lg:h-[calc(100vh_-_4rem)]' : 'lg:h-[100vh]',
-                withHeaderOffset ? 'lg:top-16' : 'lg:top-0',
                 'page-no-toc:hidden',
+                topOffset,
             )}
         >
             {header ? header : null}

packages/gitbook/tailwind.config.ts

@@ -192,6 +192,7 @@ const config: Config = {
             },
             boxShadow: {
                 thinbottom: '0px 1px 0px rgba(0, 0, 0, 0.05)',
+                thintop: '0px -1px 0px  rgba(0, 0, 0, 0.05)',
                 '1xs': '0px 1px 1px rgba(0, 0, 0, 0.09), 0px 3.267px 2.754px rgb(0, 0, 0, 0.05), 0px 6.278px 6.63px rgb(0, 0, 0, 0.05), 0px 14px 22px rgb(0, 0, 0, 0.04)',
             },
         },