feat: added auto scroll toc

Author: Sanchitv3

apps/website/components/custom/toc/index.tsx

@@ -1,5 +1,5 @@
 import { usePathname } from 'next/navigation';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 interface HeadingItem {
   id: string;
@@ -39,6 +39,18 @@ export const TOC: React.FC = () => {
 
   const pathname = usePathname();
 
+  const tocRefs = useRef<Record<string, HTMLAnchorElement | null>>({});
+  useEffect(() => {
+    const activeEl = tocRefs.current[activeId];
+    if (activeEl) {
+      activeEl.scrollIntoView({
+        block: 'nearest',
+        inline: 'nearest',
+        behavior: 'smooth',
+      });
+    }
+  }, [activeId]);
+
   useEffect(() => {
     // Grab h1–h5
     const scrollContainer = document.getElementById('layout-content');
@@ -146,6 +158,9 @@ export const TOC: React.FC = () => {
         return (
           <li key={item.id} className="relative">
             <a
+              ref={(el) => {
+                tocRefs.current[item.id] = el;
+              }}
               href={`#${item.id}`}
               onClick={handleClick(item.id)}
               className={`