Add transitions to Sections bg and line

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

@@ -1,19 +1,29 @@
 'use client';
-
+import { motion } from 'framer-motion';
 import React from 'react';
 
 import { useScrollActiveId } from '@/components/hooks';
 import { DocumentSection } from '@/lib/document';
 import { tcls } from '@/lib/tailwind';
 
 import { HEADER_HEIGHT_DESKTOP } from '../layout';
+import { AnimatedBackground } from '../TableOfContents/AnimatedBackground';
+import { AnimatedLine } from '../TableOfContents/AnimatedLine';
 
 /**
  * The threshold at which we consider a section as intersecting the viewport.
  */
 const SECTION_INTERSECTING_THRESHOLD = 0.9;
 
+export const springCurve = {
+    type: 'spring',
+    stiffness: 700,
+    damping: 50,
+    mass: 0.8,
+};
+
 export function ScrollSectionsList(props: { sections: DocumentSection[] }) {
+    const [hoveredId, setHoveredId] = React.useState<null | string>(null);
     const { sections } = props;
 
     const ids = React.useMemo(() => {
@@ -28,31 +38,39 @@ export function ScrollSectionsList(props: { sections: DocumentSection[] }) {
     });
 
     return (
-        <ul className={tcls('border-l', 'border-dark/2', 'dark:border-light/1', 'space-y-1')}>
+        <ul className={tcls('border-l', 'border-dark/2', 'dark:border-light/1')}>
             {sections.map((section) => (
-                <li key={section.id} className={tcls('flex', 'flex-row')}>
+                <motion.li
+                    key={section.id}
+                    className={tcls('flex', 'flex-row', 'relative', 'h-fit')}
+                    onMouseEnter={() => setHoveredId(section.id)}
+                    onMouseLeave={() => setHoveredId(activeId)}
+                >
+                    {activeId === section.id ? <AnimatedLine /> : null}
+                    {hoveredId === section.id ? (
+                        <AnimatedBackground />
+                    ) : activeId === section.id ? (
+                        <AnimatedBackground />
+                    ) : null}
                     <a
                         href={`#${section.id}`}
                         className={tcls(
                             'flex',
                             'flex-row',
+                            'z-10',
+                            'w-full',
                             'items-baseline',
                             'left-[-1px]',
                             'relative',
                             'text-sm',
                             'py-1',
                             'ps-3',
-                            'hover:text-primary',
-                            'transition-all',
-                            'border-l',
-                            'border-transparent',
+
                             section.depth > 1 ? ['ps-6', 'opacity-8'] : null,
                             activeId === section.id
                                 ? [
                                       'text-primary',
-                                      'border-primary',
                                       'dark:text-primary-400',
-                                      'dark:border-primary-400',
                                       'opacity-[1]',
                                       '[&>span]:bg-primary-400',
                                       'dark:[&>span]:bg-primary-600',
@@ -71,7 +89,7 @@ export function ScrollSectionsList(props: { sections: DocumentSection[] }) {
 
                         {section.title}
                     </a>
-                </li>
+                </motion.li>
             ))}
         </ul>
     );

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

@@ -0,0 +1,17 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import React from 'react';
+
+import { springCurve } from '../PageAside/ScrollSectionsList';
+
+export function AnimatedBackground() {
+    return (
+        <motion.div
+            layout
+            layoutId="sections-item"
+            className="absolute left-0 top-0 z-0 h-full w-full bg-primary-50"
+            transition={springCurve}
+        />
+    );
+}

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

@@ -0,0 +1,26 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import React from 'react';
+
+import { tcls } from '@/lib/tailwind';
+
+import { springCurve } from '../PageAside/ScrollSectionsList';
+
+export function AnimatedLine() {
+    return (
+        <motion.div
+            layout
+            layoutId="sections-line"
+            className={tcls([
+                'border-primary',
+                'border-l',
+                'dark:border-primary-400',
+                'h-full',
+                'absolute',
+                'z-20',
+            ])}
+            transition={springCurve}
+        />
+    );
+}