Fix navigation

Author: estruyf

components/Docs/NavGroup.tsx

@@ -15,7 +15,6 @@ export const NavGroup: React.FunctionComponent<INavGroupProps> = ({
   item
 }: React.PropsWithChildren<INavGroupProps>) => {
   const router = useRouter();
-  const [hasActiveLink, setHasActiveLink] = React.useState<boolean>(false);
 
   const getLinks = React.useMemo(() => {
     const { content } = item;
@@ -28,13 +27,6 @@ export const NavGroup: React.FunctionComponent<INavGroupProps> = ({
       return null;
     }
 
-    const crntPath = router.asPath.replace(/\/#/, '#');
-    let activeLink = !!links.find(link => crntPath === link[1].replace(/\/#/, '#'));
-    if (!activeLink && subItems && subItems.length > 0) {
-      activeLink = !!subItems.find(link => crntPath === `/docs/${link.slug}`.replace(/\/#/, '#'));
-    }
-    setHasActiveLink(!!activeLink);
-
     return (
       <ul className={`mt-2 space-y-2`}>
         {links.map((link, index) => {
@@ -64,8 +56,7 @@ export const NavGroup: React.FunctionComponent<INavGroupProps> = ({
   return (
     <Section
       title={item.title}
-      link={`/docs/${item.slug !== "index" ? item.slug : ''}`}
-      hasActiveLink={hasActiveLink}>
+      link={`/docs/${item.slug !== "index" ? item.slug : ''}`}>
       {getLinks}
     </Section>
   );

components/Link/Section.tsx

@@ -7,22 +7,29 @@ import { useEffect } from 'react';
 export interface ISectionProps {
   title: string;
   link: string;
-  hasActiveLink: boolean;
 }
 
 export const Section: React.FunctionComponent<React.PropsWithChildren<ISectionProps>> = ({
   title,
   link,
-  hasActiveLink,
   children
 }: React.PropsWithChildren<ISectionProps>) => {
   const router = useRouter();
   const [isActive, setIsActive] = React.useState(false);
   const [showChildren, setShowChildren] = React.useState<boolean | undefined>(undefined);
+  const [hasActiveLink, setHasActiveLink] = React.useState<boolean | undefined>(undefined);
 
   useEffect(() => {
     const page = router.asPath;
-    setIsActive(page === link || link === `${page}/` || page.includes(`${link}#`) || page.includes(`${link}index`));
+    console.log(page, link);
+    // Remove the last slash
+    const crntLink = link.endsWith('/') ? link.slice(0, -1) : link;
+    console.log(page, crntLink);
+    setIsActive(page === crntLink || crntLink === `${page}/` || page.includes(`${crntLink}#`) || page.includes(`${crntLink}index`));
+
+    if (crntLink.split('/').length > 2) {
+      setHasActiveLink(page.includes(crntLink))
+    }
   }, [router.asPath, link]);
 
   return (
@@ -40,7 +47,11 @@ export const Section: React.FunctionComponent<React.PropsWithChildren<ISectionPr
           title={`Show children of ${title.toLowerCase()}`}
           onClick={() => setShowChildren(prev => !prev)} >
           {
-            ((isActive && typeof showChildren === "undefined") || (hasActiveLink && typeof showChildren === "undefined") || showChildren) ? (
+            (
+              (isActive && typeof showChildren === "undefined") ||
+              (hasActiveLink && typeof showChildren === "undefined") ||
+              showChildren
+            ) ? (
               <ChevronDownIcon className='h-4' />
             ) : (
               <ChevronRightIcon className='h-4' />
@@ -52,8 +63,8 @@ export const Section: React.FunctionComponent<React.PropsWithChildren<ISectionPr
       {
         (
           (isActive && typeof showChildren === "undefined") ||
-          (showChildren && typeof showChildren !== "undefined") ||
-          (hasActiveLink && typeof showChildren === "undefined")
+          (hasActiveLink && typeof showChildren === "undefined") ||
+          (showChildren && typeof showChildren !== "undefined")
         ) && children
       }
     </>