diff --git a/apps/docs/app/ui/layout/aside/Aside.tsx b/apps/docs/app/ui/layout/aside/Aside.tsx index 4a143cf03..d4057bf84 100644 --- a/apps/docs/app/ui/layout/aside/Aside.tsx +++ b/apps/docs/app/ui/layout/aside/Aside.tsx @@ -22,15 +22,7 @@ const Aside = ({ title, links }: React.PropsWithoutRef) => { const observer = useRef(null); const sectionTitleDomElement = "[data-section-title]"; const titleHeight = 28; - - const setInitialActiveItemIndex = () => { - const lastVisibleSection = findLastFullyVisibleSection(); - if (lastVisibleSection) { - const lastVisibleSectionIndex = links.findIndex(link => link.id === lastVisibleSection); - setActiveItemIndex(lastVisibleSectionIndex); - } - }; - + useEffect(() => { const sectionsTitle = document.querySelectorAll(sectionTitleDomElement); const options = { @@ -49,6 +41,13 @@ const Aside = ({ title, links }: React.PropsWithoutRef) => { observer.current?.observe(sectionTitle); }); + const setInitialActiveItemIndex = () => { + const lastVisibleSection = findLastFullyVisibleSection(); + if (lastVisibleSection) { + const lastVisibleSectionIndex = links.findIndex(link => link.id === lastVisibleSection); + setActiveItemIndex(lastVisibleSectionIndex); + } + }; setInitialActiveItemIndex(); @@ -60,7 +59,6 @@ const Aside = ({ title, links }: React.PropsWithoutRef) => { }; }, [links]); - // Custom function to determine the last fully visible section in the viewport const findLastFullyVisibleSection = () => { const sectionsTitle = document.querySelectorAll(sectionTitleDomElement); @@ -82,7 +80,6 @@ const Aside = ({ title, links }: React.PropsWithoutRef) => { // Scroll handler to set the active section when scrolling up const handleScroll = () => { - console.log("scrolling"); const lastVisibleSection = findLastFullyVisibleSection(); if (lastVisibleSection) { setActiveSection(lastVisibleSection);