From 447c6f602f437acaf0a69142a712891909707409 Mon Sep 17 00:00:00 2001
From: Nicolas Dorseuil <nicolas@gitbook.io>
Date: Tue, 17 Jun 2025 10:03:14 +0200
Subject: [PATCH] add toggleable link

---
 .../TableOfContents/ToggleableLinkItem.tsx    | 40 ++---------
 .../components/TableOfContents/toc.module.css | 68 ++++++++++++++-----
 2 files changed, 59 insertions(+), 49 deletions(-)

diff --git a/packages/gitbook/src/components/TableOfContents/ToggleableLinkItem.tsx b/packages/gitbook/src/components/TableOfContents/ToggleableLinkItem.tsx
index b118501f4..afd385431 100644
--- a/packages/gitbook/src/components/TableOfContents/ToggleableLinkItem.tsx
+++ b/packages/gitbook/src/components/TableOfContents/ToggleableLinkItem.tsx
@@ -10,6 +10,8 @@ import { useCurrentPagePath } from '../hooks';
 import { Link, type LinkInsightsProps, type LinkProps } from '../primitives';
 import { useScrollToActiveTOCItem } from './TOCScroller';
 
+import styles from './toc.module.css';
+
 /**
  * Client component for a page document to toggle its children and be marked as active.
  */
@@ -67,40 +69,12 @@ function LinkItem(
             insights={insights}
             aria-current={isActive ? 'page' : undefined}
             className={tcls(
-                'group/toclink toclink relative transition-colors',
-                'flex flex-row justify-between',
-                'circular-corners:rounded-2xl rounded-md straight-corners:rounded-none p-1.5 pl-3',
-                'text-balance font-normal text-sm text-tint-strong/7 hover:bg-tint-hover hover:text-tint-strong contrast-more:text-tint-strong',
-                'hover:contrast-more:text-tint-strong hover:contrast-more:ring-1 hover:contrast-more:ring-tint-12',
-                'before:contents[] before:-left-px before:absolute before:inset-y-0',
-                'sidebar-list-line:rounded-l-none sidebar-list-line:before:w-px sidebar-list-default:[&+div_a]:rounded-l-none [&+div_a]:pl-5 sidebar-list-default:[&+div_a]:before:w-px',
+                'group/toclink',
+                'toclink',
+                'before:contents[]',
+                styles.toggleableLink,
 
-                isActive && [
-                    'font-semibold',
-                    'sidebar-list-line:before:w-0.5',
-
-                    'before:bg-primary-solid',
-                    'text-primary-subtle',
-                    'contrast-more:text-primary',
-
-                    'sidebar-list-pill:bg-primary',
-                    '[html.sidebar-list-pill.theme-muted_&]:bg-primary-hover',
-                    '[html.sidebar-list-pill.theme-bold.tint_&]:bg-primary-hover',
-                    '[html.sidebar-filled.sidebar-list-pill.theme-muted_&]:bg-primary',
-                    '[html.sidebar-filled.sidebar-list-pill.theme-bold.tint_&]:bg-primary',
-
-                    'hover:bg-primary-hover',
-                    'hover:text-primary',
-                    'hover:before:bg-primary-solid-hover',
-                    'sidebar-list-pill:hover:bg-primary-hover',
-
-                    'contrast-more:text-primary',
-                    'contrast-more:hover:text-primary-strong',
-                    'contrast-more:bg-primary',
-                    'contrast-more:ring-1',
-                    'contrast-more:ring-primary',
-                    'contrast-more:hover:ring-primary-hover',
-                ]
+                isActive && styles.active
             )}
         >
             {children}
diff --git a/packages/gitbook/src/components/TableOfContents/toc.module.css b/packages/gitbook/src/components/TableOfContents/toc.module.css
index 94cd63131..35bf98d92 100644
--- a/packages/gitbook/src/components/TableOfContents/toc.module.css
+++ b/packages/gitbook/src/components/TableOfContents/toc.module.css
@@ -1,19 +1,55 @@
 .pageLinkItem {
     @apply flex
-                    justify-start
-                    items-center
-                    gap-3
-                    p-1.5
-                    pl-3
-                    text-sm
-                    transition-colors
-                    duration-100
-                    text-tint-strong/7
-                    rounded-md
-                    straight-corners:rounded-none
-                    circular-corners:rounded-xl
-                    before:content-none
-                    font-normal
-                    hover:bg-tint
-                    hover:text-tint-strong;
+            justify-start
+            items-center
+            gap-3
+            p-1.5
+            pl-3
+            text-sm
+            transition-colors
+            duration-100
+            text-tint-strong/7
+            rounded-md
+            straight-corners:rounded-none
+            circular-corners:rounded-xl
+            before:content-none
+            font-normal
+            hover:bg-tint
+            hover:text-tint-strong;
+}
+
+.toggleableLink {
+    @apply relative transition-colors
+            flex flex-row justify-between
+            circular-corners:rounded-2xl rounded-md straight-corners:rounded-none p-1.5 pl-3
+            text-balance font-normal text-sm text-tint-strong/7 hover:bg-tint-hover hover:text-tint-strong contrast-more:text-tint-strong
+            hover:contrast-more:text-tint-strong hover:contrast-more:ring-1 hover:contrast-more:ring-tint-12
+            before:-left-px before:absolute before:inset-y-0
+            sidebar-list-line:rounded-l-none sidebar-list-line:before:w-px sidebar-list-default:[&+div_a]:rounded-l-none [&+div_a]:pl-5 sidebar-list-default:[&+div_a]:before:w-px;
+}
+
+.active {
+    @apply font-semibold
+            sidebar-list-line:before:w-0.5
+
+            before:bg-primary-solid
+            text-primary-subtle
+
+            sidebar-list-pill:bg-primary
+            [html.sidebar-list-pill.theme-muted_&]:bg-primary-hover
+            [html.sidebar-list-pill.theme-bold.tint_&]:bg-primary-hover
+            [html.sidebar-filled.sidebar-list-pill.theme-muted_&]:bg-primary
+            [html.sidebar-filled.sidebar-list-pill.theme-bold.tint_&]:bg-primary
+
+            hover:bg-primary-hover
+            hover:text-primary
+            hover:before:bg-primary-solid-hover
+            sidebar-list-pill:hover:bg-primary-hover
+
+            contrast-more:text-primary
+            contrast-more:hover:text-primary-strong
+            contrast-more:bg-primary
+            contrast-more:ring-1
+            contrast-more:ring-primary
+            contrast-more:hover:ring-primary-hover;
 }