Restyle PageAside to use sidebar list styles

.changeset/nasty-parents-sell.md

@@ -0,0 +1,5 @@
+---
+'gitbook': minor
+---
+
+Restyle PageAside to use sidebar list styles

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

@@ -0,0 +1,47 @@
+'use client';
+
+import { Transition, motion, useReducedMotion } from 'framer-motion';
+import React from 'react';
+
+import { ClassValue, tcls } from '@/lib/tailwind';
+
+export function AsideSectionHighlight({
+    transition,
+    className,
+}: {
+    transition?: Transition;
+    className?: ClassValue;
+}) {
+    const prefersReducedMotion = useReducedMotion();
+
+    return (
+        <motion.div
+            layout
+            layoutId="sections-line"
+            className={tcls([
+                'border-primary',
+                'sidebar-list-line:border-l-2',
+
+                'dark:border-primary-400',
+                'inset-0',
+                'pointer-events-none',
+                'absolute',
+                'z-0',
+                'sidebar-list-line:-left-px',
+
+                'rounded-md',
+                'straight-corners:rounded-none',
+                'sidebar-list-line:rounded-l-none',
+
+                'sidebar-list-pill:bg-primary/3',
+                'dark:sidebar-list-pill:bg-primary-400/3',
+
+                'contrast-more:border',
+                'contrast-more:bg-primary/3',
+                'dark:contrast-more:bg-primary-400/3',
+                className,
+            ])}
+            transition={prefersReducedMotion ? { duration: 0 } : transition}
+        />
+    );
+}

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

@@ -23,13 +23,15 @@ 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.topHeader && props.sectionsHeader) {
+        return 'lg:top-[6.75rem] lg:max-h-[calc(100vh_-_6.75rem)]';
     }
+
     if (props.topHeader) {
-        return 'lg:max-h-[calc(100vh_-_6rem)] top-24 page-api-block:xl:max-2xl:top-24';
+        return 'lg:top-16 lg:max-h-[calc(100vh_-_3rem)]';
     }
-    return 'lg:max-h-screen top-0 page-api-block:xl:max-2xl:top-0';
+
+    return 'lg:top-0 lg:max-h-screen';
 }
 
 /**
@@ -76,40 +78,61 @@ export async function PageAside(props: {
                 'grow-0',
                 'shrink-0',
                 'sticky',
-                withHeaderOffset.topHeader ? 'py-4' : 'py-8',
                 'break-anywhere', // To prevent long words in headings from breaking the layout
-                'lg:h-full',
-                'h-[100vh]',
-                'page-api-block:xl:max-2xl:z-[1]',
+
+                'text-dark/7',
+                'dark:text-light/7',
+                'contrast-more:text-dark',
+                'contrast-more:dark:text-light',
+
                 // 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:z-10',
                 'page-api-block:xl:max-2xl:fixed',
                 'page-api-block:xl:max-2xl:right-8',
                 'page-api-block:xl:max-2xl:w-56',
-                'page-api-block:xl:max-2xl:bg-light-2/9',
-                'page-api-block:xl:max-2xl:rounded',
+                'page-api-block:xl:max-2xl:bg-light-2',
+                'page-api-block:xl:max-2xl:bg-opacity-9',
+                'page-api-block:xl:max-2xl:contrast-more:bg-opacity-11',
+                'page-api-block:xl:max-2xl:backdrop-blur-lg',
+                'page-api-block:xl:max-2xl:border',
+                'page-api-block:xl:max-2xl:border-dark/2',
+                'page-api-block:xl:max-2xl:dark:border-light/2',
+                'page-api-block:xl:max-2xl:hover:shadow-lg',
+                'page-api-block:xl:max-2xl:hover:shadow-dark/2',
+                'page-api-block:xl:max-2xl:rounded-md',
                 'page-api-block:xl:max-2xl:h-auto',
-                'page-api-block:xl:max-2xl:py-0',
-                'page-api-block:xl:max-2xl:mt-3',
+                'page-api-block:xl:max-2xl:my-8',
                 'dark:page-api-block:xl:max-2xl:bg-dark-2/8',
+
                 topOffset,
             )}
         >
             <div
                 className={tcls(
                     'hidden',
                     'page-api-block:xl:max-2xl:flex',
+                    'text-xs',
+                    'tracking-wide',
+                    'font-semibold',
+                    'uppercase',
+
                     'flex-row',
                     'items-center',
-                    'gap-3',
-                    'text-sm',
-                    'font-semibold',
-                    'px-2',
-                    'py-2',
+                    'gap-2',
+                    'p-2',
                 )}
             >
-                <Icon icon="bars" className={tcls('size-3')} />
+                <Icon icon="block-quote" className={tcls('size-3')} />
                 {t(language, 'on_this_page')}
+                <Icon
+                    icon="chevron-down"
+                    className={tcls(
+                        'size-3',
+                        'opacity-6',
+                        'ml-auto',
+                        'page-api-block:xl:max-2xl:group-hover/aside:hidden',
+                    )}
+                />
             </div>
             <div
                 className={tcls(
@@ -118,9 +141,11 @@ export async function PageAside(props: {
                     'flex',
                     'flex-col',
                     'gap-6',
+                    'py-8',
                     '[&::-webkit-scrollbar]:bg-transparent',
                     '[&::-webkit-scrollbar-thumb]:bg-transparent',
 
+                    'page-api-block:xl:max-2xl:py-0',
                     // Hide it for api page, until hovered
                     'page-api-block:xl:max-2xl:hidden',
                     'page-api-block:xl:max-2xl:group-hover/aside:flex',
@@ -132,7 +157,20 @@ export async function PageAside(props: {
                     </React.Suspense>
                 ) : null}
                 <div
-                    className={tcls('flex', 'flex-col', 'gap-3', 'page-api-block:xl:max-2xl:px-3')}
+                    className={tcls(
+                        'flex',
+                        'flex-col',
+                        'gap-3',
+                        'sidebar-list-default:px-3',
+                        'border-t',
+                        'first:border-none',
+                        'border-dark/2',
+                        'dark:border-light/2',
+                        'py-4',
+                        'first:pt-0',
+                        'page-api-block:xl:max-2xl:px-3',
+                        'empty:hidden',
+                    )}
                 >
                     {withPageFeedback ? (
                         <React.Suspense fallback={null}>
@@ -148,10 +186,8 @@ export async function PageAside(props: {
                                     'flex-row',
                                     'items-center',
                                     'text-sm',
-                                    'text-dark/6',
                                     'hover:text-primary',
                                     'py-2',
-                                    'dark:text-light/5',
                                 )}
                             >
                                 <Icon
@@ -175,10 +211,8 @@ export async function PageAside(props: {
                                     'flex-row',
                                     'items-center',
                                     'text-sm',
-                                    'text-dark/6',
                                     'hover:text-primary',
                                     'py-2',
-                                    'dark:text-light/5',
                                 )}
                             >
                                 <Icon icon="file-pdf" className={tcls('size-4', 'mr-1.5')} />
@@ -196,7 +230,7 @@ export async function PageAside(props: {
                 spaceId={space.id}
                 siteAdsStatus={site?.ads && site.ads.status ? site.ads.status : undefined}
                 ignore={process.env.NODE_ENV !== 'production'}
-                style={tcls('mt-4')}
+                style={tcls(site?.ads && site.ads.status === SiteAdsStatus.Live && ['mt-4'])}
             />
         </aside>
     );

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

@@ -6,7 +6,7 @@ import { useScrollActiveId } from '@/components/hooks';
 import { DocumentSection } from '@/lib/document';
 import { tcls } from '@/lib/tailwind';
 
-import { AnimatedLine } from './AnimatedLine';
+import { AsideSectionHighlight } from './AsideSectionHighlight';
 import { HEADER_HEIGHT_DESKTOP } from '../layout';
 
 /**
@@ -36,44 +36,88 @@ export function ScrollSectionsList(props: { sections: DocumentSection[] }) {
     });
 
     return (
-        <ul className={tcls('border-l', 'border-dark/2', 'dark:border-light/1', 'pl-1')}>
+        <ul className={tcls('sidebar-list-line:border-l', 'border-dark/2', 'dark:border-light/1')}>
             {sections.map((section) => (
                 <motion.li
                     key={section.id}
-                    className={tcls('flex', 'flex-row', 'relative', 'h-fit')}
+                    className={tcls(
+                        'flex',
+                        'flex-row',
+                        'relative',
+                        'h-fit',
+                        'mt-2',
+                        section.depth > 1 && ['ml-3', 'my-0', 'sidebar-list-line:ml-0'],
+                    )}
                 >
-                    {activeId === section.id ? <AnimatedLine transition={springCurve} /> : null}
+                    {activeId === section.id ? (
+                        <AsideSectionHighlight
+                            transition={springCurve}
+                            className={tcls(
+                                section?.depth > 1
+                                    ? [
+                                          'sidebar-list-default:rounded-l-none',
+                                          'sidebar-list-line:rounded-l-none',
+                                          'sidebar-list-default:border-l',
+                                      ]
+                                    : [
+                                          'sidebar-list-default:ml-3',
+                                          'contrast-more:sidebar-list-default:ml-0',
+                                      ],
+                            )}
+                        />
+                    ) : null}
                     <a
                         href={`#${section.id}`}
                         className={tcls(
+                            'relative',
                             'flex',
                             'flex-row',
-                            'z-10',
-                            'w-full',
                             'items-baseline',
-                            'left-[-1px]',
-                            'relative',
+                            'z-10',
                             'text-sm',
+
+                            'w-full',
                             'py-1',
-                            'ps-3',
-                            'pe-2',
+                            'px-3',
+
                             'transition-all',
                             'duration-200',
-                            section.depth > 1 ? ['ps-6', 'opacity-8'] : null,
-                            activeId === section.id
-                                ? [
-                                      'text-primary',
-                                      'dark:text-primary-400',
-                                      '[&>span]:bg-primary-400',
-                                      'dark:[&>span]:bg-primary-600',
-                                      'dark:[&>span]:text-dark',
-                                  ]
-                                : [
-                                      'text-neutral-500',
-                                      'dark:text-neutral-400',
-                                      'hover:text-neutral-900',
-                                      'dark:hover:text-neutral-100',
-                                  ],
+
+                            'rounded-md',
+                            'straight-corners:rounded-none',
+                            'sidebar-list-line:rounded-l-none',
+
+                            'hover:bg-dark/1',
+                            'dark:hover:bg-light/1',
+                            'contrast-more:hover:ring-1',
+                            'contrast-more:hover:ring-inset',
+                            'contrast-more:hover:ring-current',
+
+                            section.depth > 1 && [
+                                'subitem',
+                                'sidebar-list-line:pl-6',
+                                'opacity-8',
+                                'contrast-more:opacity-11',
+
+                                'sidebar-list-default:rounded-l-none',
+                                'sidebar-list-default:border-l',
+                                'sidebar-list-default:border-dark/3',
+                                'dark:sidebar-list-default:border-light/3',
+                            ],
+
+                            activeId === section.id && [
+                                'text-primary',
+                                'hover:text-primary',
+                                'dark:text-primary-400',
+                                'dark:hover:text-primary-400',
+
+                                'contrast-more:font-semibold',
+
+                                'hover:bg-primary/3',
+                                'dark:hover:bg-primary-400/3',
+                                'sidebar-list-pill:hover:bg-transparent',
+                                'dark:sidebar-list-pill:hover:bg-transparent',
+                            ],
                         )}
                     >
                         {section.tag ? (

packages/gitbook/src/components/PageFeedback/PageFeedbackForm.tsx

@@ -47,9 +47,7 @@ export function PageFeedbackForm(props: {
                 className,
             )}
         >
-            <p className={tcls('text-sm', 'text-dark/6', 'dark:text-light/5')}>
-                {t(languages, 'was_this_helpful')}
-            </p>
+            <p className={tcls('text-sm')}>{t(languages, 'was_this_helpful')}</p>
             <div
                 className={tcls(
                     'inline-flex',
@@ -66,7 +64,7 @@ export function PageFeedbackForm(props: {
                 )}
             >
                 {submitted ? (
-                    <p className={tcls('text-sm', 'px-4', 'text-dark/7', 'dark:text-light/6')}>
+                    <p className={tcls('text-sm', 'px-4')}>
                         {t(languages, 'was_this_helpful_thank_you')}
                     </p>
                 ) : (
@@ -117,10 +115,10 @@ function RatingButton(props: { rating: number; label: string; onClick: () => voi
                 'h-8',
                 'w-8',
                 'rounded-sm',
-                'text-dark/6',
+                'text-dark/7',
                 'hover:bg-primary/4',
                 'hover:text-primary-600',
-                'dark:text-light/5',
+                'dark:text-light/7',
                 'dark:hover:text-primary-300',
                 'dark:hover:bg-primary-300/2',
             )}