diff --git a/src/components/UI/docs/DocsLinks.tsx b/src/components/UI/docs/DocsLinks.tsx index b3c5aa96a9..da4c9dae45 100644 --- a/src/components/UI/docs/DocsLinks.tsx +++ b/src/components/UI/docs/DocsLinks.tsx @@ -1,4 +1,4 @@ -import { FC } from 'react'; +import { FC, useEffect, useState } from 'react'; import { Accordion, AccordionButton, @@ -24,16 +24,33 @@ interface Props { } export const DocsLinks: FC = ({ navLinks, toggleMobileAccordion }) => { - const { asPath, query: { slug } } = useRouter(); + const [openSections, setOpenSections] = useState<{ [key: string]: boolean }>({}); + const { + asPath, + query: { slug } + } = useRouter(); + + useEffect(() => { + setOpenSections( + navLinks.reduce( + (acc, navLink) => ({ + ...acc, + [navLink.id]: checkNavLinks({ items: navLink.items, pathCheck: asPath }) + }), + {} + ) + ); + }, [asPath]); // eslint-disable-line react-hooks/exhaustive-deps return ( {navLinks.map(({ id, to, items }, idx) => { const split = to?.split('/'); const isActive = slug && split && split[split.length - 1] === slug[slug.length - 1]; - const isSectionActive = checkNavLinks({ to, items, pathCheck: asPath.split('#')[0] }) - + const handleToggle = () => { + setOpenSections(prev => ({ ...prev, [id]: !prev[id] })); + }; return ( - + {({ isExpanded }) => ( <> @@ -45,6 +62,7 @@ export const DocsLinks: FC = ({ navLinks, toggleMobileAccordion }) => { placeContent='flex-end' bg='button-bg' data-group + onClick={handleToggle} >