Fix navigation and table of contents highlighting issues (#169)

src/components/Layout.jsx

@@ -103,7 +103,7 @@ function useTableOfContents(tableOfContents) {
     if (tableOfContents.length === 0) return
     let headings = getHeadings(tableOfContents)
     function onScroll() {
-      let top = window.scrollY
+      let top = window.scrollY + 10;
       let current = headings[0]?.id
       for (let heading of headings) {
         if (top >= heading?.top) {

src/components/NavigationDocs.jsx

@@ -217,10 +217,7 @@ export const docsNavigation = [
     const [isOpen, setIsOpen] = useState(group.isOpen ? group.isOpen :!hasChildren);
     const [, setActiveHighlight] = useNavigationState();
  
- 
     return (
- 
- 
         <li className={clsx('relative', className, hasChildren ? "" : "mt-6")}>
             <motion.h2
                 layout={"size"}
@@ -231,13 +228,14 @@ export const docsNavigation = [
                 onClick={() => {
                     setIsOpen(!isOpen)
                     if(!isOpen) {
-                        router.push(group.links[0].href)
+                        if(!isActiveGroup) router.push(group.links[0].href)
                         setActiveHighlight()
                     }else {
                         setActiveHighlight(group.title)
                     }
                 }}
                 data-nb-link={group.title}
+                data-nb-active={hasChildren && isActiveGroup ? "1" : "0"}
             >
                 {group.title}
                 {hasChildren && <ChevronDownIcon className={clsx("fill-zinc-700 group-hover:fill-zinc-900 dark:fill-zinc-300 dark:group-hover:fill-white","transition", isOpen ? "transform rotate-180" : "")} size={10} />}

src/components/NavigationState.jsx

@@ -18,8 +18,9 @@ export function NavigationStateProvider({ children,index }) {
         });
         links.shift();
 
+        const activeGroupTitle = groupTitle ? groupTitle : document.querySelector(`.outer-wrapper-${index} [data-nb-active="1"]`)?.getAttribute('data-nb-link');
         const activeIndex = links.findIndex((link) => link === "1");
-        const activeGroupIndex = links.findIndex((link) => link === groupTitle);
+        const activeGroupIndex = links.findIndex((link) => link === activeGroupTitle);
 
         if(activeGroupIndex !== -1 && activeIndex === -1){
             setActiveIndex(activeGroupIndex);
@@ -30,7 +31,7 @@ export function NavigationStateProvider({ children,index }) {
     }
 
     useEffect(() => {
-        setActiveHighlight();
+        setActiveHighlight().then();
     }, [router.pathname]);
 
     return (