Fix navigation

Author: estruyf

components/Docs/CodeHighlighting.tsx

@@ -83,8 +83,6 @@ export const CodeHighlighting: React.FunctionComponent<ICodeHighlightingProps> =
 
       shiki.setCDN(`../../`);
 
-      console.log(language);
-
       shiki.getHighlighter({
         langs: [language as any],
         theme: `the-unnamed`

components/Docs/NavGroup.tsx

@@ -3,6 +3,7 @@ import { Section } from '../Link/Section';
 import { PageFrontMatter } from '../../models';
 import { Link } from '../Link/Link';
 import { ParentLink } from '../Link/ParentLink';
+import { useRouter } from 'next/router';
 
 export interface INavGroupProps {
   items: PageFrontMatter[];
@@ -13,6 +14,9 @@ export const NavGroup: React.FunctionComponent<INavGroupProps> = ({
   items,
   item
 }: React.PropsWithChildren<INavGroupProps>) => {
+  const router = useRouter();
+  const [hasActiveLink, setHasActiveLink] = React.useState<boolean>(false);
+
   const getLinks = React.useMemo(() => {
     const { content } = item;
     const links = Array.from(content.matchAll(/^## (.*$)/gim));
@@ -24,16 +28,25 @@ 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) => (
-          <li key={index}>
-            <Link
-              title={link[1]}
-              link={`/docs/${item.slug !== "index" ? item.slug : ''}#${link[1].toLowerCase().replace(/\s/g, '-')}`}
-            />
-          </li>
-        ))}
+        {links.map((link, index) => {
+          return (
+            <li key={index}>
+              <Link
+                title={link[1]}
+                link={`/docs/${item.slug !== "index" ? item.slug : ''}#${link[1].toLowerCase().replace(/\s/g, '-')}`}
+              />
+            </li>
+          );
+        })}
 
         {subItems.map((subItem) => (
           <li key={subItem.slug} className={`group`}>
@@ -51,7 +64,8 @@ export const NavGroup: React.FunctionComponent<INavGroupProps> = ({
   return (
     <Section
       title={item.title}
-      link={`/docs/${item.slug !== "index" ? item.slug : ''}`}>
+      link={`/docs/${item.slug !== "index" ? item.slug : ''}`}
+      hasActiveLink={hasActiveLink}>
       {getLinks}
     </Section>
   );

components/Link/Section.tsx

@@ -7,9 +7,15 @@ import { useEffect } from 'react';
 export interface ISectionProps {
   title: string;
   link: string;
+  hasActiveLink: boolean;
 }
 
-export const Section: React.FunctionComponent<React.PropsWithChildren<ISectionProps>> = ({ title, link, children }: React.PropsWithChildren<ISectionProps>) => {
+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);
@@ -34,7 +40,7 @@ export const Section: React.FunctionComponent<React.PropsWithChildren<ISectionPr
           title={`Show children of ${title.toLowerCase()}`}
           onClick={() => setShowChildren(prev => !prev)} >
           {
-            ((isActive && typeof showChildren === "undefined") || showChildren) ? (
+            ((isActive && typeof showChildren === "undefined") || (hasActiveLink && typeof showChildren === "undefined") || showChildren) ? (
               <ChevronDownIcon className='h-4' />
             ) : (
               <ChevronRightIcon className='h-4' />
@@ -46,7 +52,8 @@ export const Section: React.FunctionComponent<React.PropsWithChildren<ISectionPr
       {
         (
           (isActive && typeof showChildren === "undefined") ||
-          (showChildren && typeof showChildren !== "undefined")
+          (showChildren && typeof showChildren !== "undefined") ||
+          (hasActiveLink && typeof showChildren === "undefined")
         ) && children
       }
     </>