feat: toc auto scroll

Author: SoonIter

packages/theme-default/package.json

@@ -50,6 +50,7 @@
     "nprogress": "^0.2.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
+    "scroll-into-view-if-needed": "^3.1.0",
     "shiki": "^3.12.2"
   },
   "devDependencies": {

packages/theme-default/src/components/Aside/index.scss

@@ -3,9 +3,7 @@
   flex-direction: column;
   border-left: 1px solid var(--rp-c-divider-light);
   padding-left: 20px;
-
-  max-width: calc(100vh - var(--rp-nav-height) - var(--rp-sidebar-menu-height));
-  // padding-bottom: 100px;
+  padding-right: 20px;
 
   &__title {
     font-size: 14px;
@@ -36,5 +34,11 @@
     flex-direction: column;
     flex: 1;
     gap: 6px;
+
+    // allow scroll when there are too many toc items
+    @media (max-width: 1280px) {
+      max-height: 60vh;
+      overflow: auto scroll;
+    }
   }
 }

packages/theme-default/src/components/Aside/index.tsx

@@ -42,7 +42,7 @@ export function Aside() {
         {outlineTitle}
         <ReadPercent size={14} strokeWidth={2} />
       </div>
-      <nav className="rp-aside__toc">
+      <nav className="rp-aside__toc rspress-scrollbar">
         <Toc />
       </nav>
       <div className="rp-aside__divider" />

packages/theme-default/src/components/SidebarMenu/index.tsx

@@ -91,9 +91,10 @@ export const SidebarMenu = forwardRef(
           {uiSwitch?.showAside && (
             <button
               type="button"
+              disabled={headers.length === 0}
               onClick={e => {
+                e.preventDefault();
                 e.stopPropagation();
-                if (headers.length === 0) return;
                 openAside();
               }}
               className="rp-sidebar-menu__right"

packages/theme-default/src/components/SidebarMenu/useClickOutside.ts

@@ -20,10 +20,10 @@ function useClickOutside(
       return;
     };
     document.addEventListener('mousedown', listener);
-    document.addEventListener('touchstart', listener);
+    document.addEventListener('touchend', listener);
     return () => {
       document.removeEventListener('mousedown', listener);
-      document.removeEventListener('touchstart', listener);
+      document.removeEventListener('touchend', listener);
     };
   }, [ref, handler]);
 }

packages/theme-default/src/components/Toc/TocItem.tsx

@@ -6,6 +6,8 @@ import {
   renderInlineMarkdown,
 } from '../../logic/utils';
 import './TocItem.scss';
+import { useEffect, useRef } from 'react';
+import scrollIntoView from 'scroll-into-view-if-needed';
 
 export const TocItem = ({
   header,
@@ -16,9 +18,28 @@ export const TocItem = ({
   baseHeaderLevel: number;
   active: boolean;
 }) => {
+  const ref = useRef<HTMLAnchorElement>(null);
+
+  useEffect(() => {
+    if (active && ref.current) {
+      scrollIntoView(ref.current, {
+        behavior: 'smooth',
+        block: 'center',
+        inline: 'center',
+        boundary: element => {
+          const isBoundary =
+            element.classList.contains('rp-doc-layout__aside') ||
+            element.classList.contains('rspress-doc');
+          return !isBoundary;
+        },
+      });
+    }
+  }, [active]);
+
   return (
     <Link
       href={`#${header.id}`}
+      ref={ref}
       title={parseInlineMarkdownText(header.text)}
       className={clsx('rp-toc-item', {
         'rp-toc-item--active': active,

packages/theme-default/src/components/Toc/useActiveAnchor.ts

@@ -1,8 +1,10 @@
+import { useLocation } from '@rspress/runtime';
 import type { Header } from '@rspress/shared';
 import { useEffect, useMemo, useRef, useState } from 'react';
 
 const useVisibleAnchors = (headers: Header[]): string[] => {
   const [visibleAnchors, setVisibleAnchors] = useState<string[]>([]);
+  const { hash } = useLocation();
 
   useEffect(() => {
     const handleScroll = () => {
@@ -27,7 +29,7 @@ const useVisibleAnchors = (headers: Header[]): string[] => {
     return () => {
       window.removeEventListener('scroll', handleScroll);
     };
-  }, [headers]);
+  }, [headers, hash]);
 
   return visibleAnchors;
 };

packages/theme-default/src/layout/DocLayout/index.scss

@@ -149,11 +149,15 @@
   }
   .rp-doc-layout {
     &__aside {
+      max-height: calc(
+        100vh - var(--rp-nav-height) - var(--rp-sidebar-menu-height)
+      );
+
       position: fixed;
       margin-top: var(--rp-sidebar-menu-height);
       background-color: color-mix(in srgb, var(--rp-c-bg) 60%, transparent);
       backdrop-filter: blur(25px);
-      padding: 20px 20px 20px 0px;
+      padding: 20px 0px 20px 0px;
       max-width: 100%;
 
       border-radius: var(--rp-radius-small);
@@ -179,8 +183,6 @@
 @media (max-width: 960px) {
   :root {
     --rp-content-padding-x: 24px;
-    --rp-z-index-nav: 40;
-    --rp-z-index-sidebar: 70;
   }
   .rp-doc-layout {
     &__sidebar {