Add nested navigation links (#112)

Co-authored-by: Eduard Gert <eduard@netbird.io>
Co-authored-by: braginini <bangvalo@gmail.com>

src/components/Footer.jsx

@@ -1,10 +1,10 @@
-import {forwardRef, Fragment, useEffect, useState} from 'react'
+import {forwardRef, Fragment, useState} from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { Transition } from '@headlessui/react'
 
 import { Button } from '@/components/Button'
-import {apiNavigation} from '@/components/NavigationAPI'
+import {apiNavigation, flattenNavItems} from '@/components/NavigationAPI'
 import {docsNavigation} from "@/components/NavigationDocs";
 
 function CheckIcon(props) {
@@ -126,7 +126,9 @@ function PageLink({ label, page, previous = false }) {
 
 function PageNavigation() {
   let router = useRouter()
-  let allPages = !router.route.startsWith('/ipa') ? docsNavigation.flatMap((group) => group.links) : apiNavigation.flatMap((group) => group.links)
+  let allPages = !router.route.startsWith('/ipa')
+      ? docsNavigation.flatMap((group) => flattenNavItems(group.links, true))
+      : apiNavigation.flatMap((group) => flattenNavItems(group.links,true));
   let currentPageIndex = allPages.findIndex(
     (page) => page.href === router.pathname
   )

src/components/NavigationAPI.jsx

@@ -1,11 +1,12 @@
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import clsx from 'clsx'
-import { AnimatePresence, motion, useIsPresent } from 'framer-motion'
+import { AnimatePresence, motion } from 'framer-motion'
 import { Button } from '@/components/Button'
 import { Tag } from '@/components/Tag'
 import { remToPx } from '@/lib/remToPx'
-import {useIsInsideMobileNavigation} from "@/components/MobileNavigation";
+import {useEffect, useState} from "react";
+import {NavigationStateProvider, useNavigationState} from "@/components/NavigationState";
 
 export const apiNavigation = [
   {
@@ -46,12 +47,13 @@ export function NavigationAPI({tableOfContents, className}) {
           <TopLevelNavItem href="https://github.com/netbirdio/netbird">Github</TopLevelNavItem>
           <TopLevelNavItem href="https://join.slack.com/t/netbirdio/shared_invite/zt-vrahf41g-ik1v7fV8du6t0RwxSrJ96A">Support</TopLevelNavItem>
           {apiNavigation.map((group, groupIndex) => (
+              <NavigationStateProvider key={group.title} index={groupIndex}>
                 <NavigationGroup
-                    key={group.title}
                     group={group}
                     tableOfContents={tableOfContents}
                     className={groupIndex === 0 && 'md:mt-0'}
                 />
+              </NavigationStateProvider>
             ))}
           <li className="sticky bottom-0 z-10 mt-6 min-[416px]:hidden">
             <Button href="https://app.netbird.io/" variant="filled" className="w-full">
@@ -75,68 +77,106 @@ export function TopLevelNavItem({ href, children }) {
   )
 }
 
-export function NavLink({ href, tag, active, isAnchorLink = false, children }) {
+export function NavLink({ href, tag, active, isAnchorLink = false, children, links, isChildren = false }) {
+  let router = useRouter();
+
   return (
-    <Link
-      href={href}
-      aria-current={active ? 'page' : undefined}
-      className={clsx(
-        'flex justify-between gap-2 py-1 pr-3 text-sm transition',
-        isAnchorLink ? 'pl-7' : 'pl-4',
-        active
-          ? 'text-zinc-900 dark:text-white'
-          : 'text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white'
-      )}
-    >
-      <span className="truncate">{children}</span>
-      {tag && (
-        <Tag variant="small" color="zinc">
-          {tag}
-        </Tag>
-      )}
-    </Link>
+      <div className={"relative"} >
+           <Link
+              href={href ? href : "#"}
+              data-nb-link={active ? 1 : 0}
+              aria-current={active ? 'page' : undefined}
+              className={clsx(
+                  'flex justify-between gap-2 py-1 pr-3 text-sm transition',
+                  isAnchorLink ? 'pl-7' : 'pl-4',
+                  active
+                      ? 'text-zinc-900 dark:text-white'
+                      : 'text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white',
+                  isChildren ? 'pl-7' : 'pl-4',
+              )}
+          >
+              <span className="truncate">{children}</span>
+              {tag && (
+                  <Tag variant="small" color="zinc">
+                      {tag}
+                  </Tag>
+              )}
+          </Link>
+
+        {links &&
+            <ul role="list">
+              {links.map((link,index) => (
+                  <motion.li key={index} layout="position" className="relative">
+                    <NavLink href={link.href} active={link.href === router.pathname} isChildren={true}>
+                      {link.title}
+                    </NavLink>
+                  </motion.li>
+              ))}
+            </ul>
+        }
+  </div>
+
   )
 }
 
-export function VisibleSectionHighlight({ group, pathname }) {
-  let height = remToPx(2)
-  let offset = remToPx(0)
-  let activePageIndex = group.links.findIndex((link) => link.href === pathname)
-  let top = offset + activePageIndex * height
-
-  return (
-    <motion.div
-      layout
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1, transition: { delay: 0.2 } }}
-      exit={{ opacity: 0 }}
-      className="absolute inset-x-0 top-0 bg-zinc-800/2.5 will-change-transform dark:bg-white/2.5"
-      style={{ borderRadius: 8, height, top }}
-    />
-  )
+export function flattenNavItems(links, onlyLinks = false) {
+    let output = []
+    for (let link of links) {
+        output.push(link)
+        if (link.links) output.push(...flattenNavItems(link.links, onlyLinks))
+    }
+    if(onlyLinks) output = output.filter((link) => link.href)
+    return output
 }
 
-export function ActivePageMarker({ group, pathname }) {
-  let itemHeight = remToPx(2)
-  let offset = remToPx(0.25)
-  let activePageIndex = group.links.findIndex((link) => link.href === pathname)
-  let top = offset + activePageIndex * itemHeight
+export function VisibleSectionHighlight() {
+    const router = useRouter();
+    let height = remToPx(2)
+    let offset = remToPx(0)
+    const [activeIndex] = useNavigationState();
+    const [top, setTop] = useState(0);
 
-  return (
-    <motion.div
-      layout
-      className="absolute left-2 h-6 w-px bg-orange-500"
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1, transition: { delay: 0.2 } }}
-      exit={{ opacity: 0 }}
-      style={{ top }}
-    />
-  )
+    useEffect(() => {
+        setTop(offset + (activeIndex) * height);
+    }, [activeIndex, router.pathname]);
+
+    return activeIndex >= 0 && (
+        <motion.div
+            layout
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1, transition: { delay: 0.2 } }}
+            exit={{ opacity: 0 }}
+            className="absolute inset-x-0 top-0 bg-zinc-800/2.5 will-change-transform dark:bg-white/2.5"
+            style={{ borderRadius: 8, height, top }}
+        />
+    )
+}
+
+export function ActivePageMarker() {
+    const router = useRouter();
+    let itemHeight = remToPx(2)
+    let offset = remToPx(0.25)
+    const [activeIndex] = useNavigationState();
+    const [top, setTop] = useState(0);
+
+    useEffect(() => {
+        setTop(offset + (activeIndex) * itemHeight);
+    }, [activeIndex, router.pathname]);
+
+    return activeIndex >= 0 && (
+        <motion.div
+            layout
+            className="absolute left-2 h-6 w-px bg-orange-500"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1, transition: { delay: 0.2 } }}
+            exit={{ opacity: 0 }}
+            style={{ top }}
+        />
+    )
 }
 
 function NavigationGroup({ group, className, tableOfContents }) {
   let router = useRouter()
-
   let isActiveGroup =
     group.links.findIndex((link) => link.href === router.pathname.replace("ipa", "api")) !== -1
 
@@ -144,6 +184,7 @@ function NavigationGroup({ group, className, tableOfContents }) {
     <li className={clsx('relative mt-6', className)}>
       <motion.h2
         layout="position"
+        data-nb-link={group.title}
         className="text-xs font-semibold text-zinc-900 dark:text-white"
       >
         {group.title}

src/components/NavigationDocs.jsx

@@ -1,8 +1,16 @@
 import { useRouter } from 'next/router'
 import clsx from 'clsx'
-import {ActivePageMarker, NavLink, TopLevelNavItem, VisibleSectionHighlight} from "@/components/NavigationAPI";
+import {
+    ActivePageMarker,
+    NavLink,
+    TopLevelNavItem,
+    VisibleSectionHighlight
+} from "@/components/NavigationAPI";
 import {AnimatePresence, motion} from "framer-motion";
 import {Button} from "@/components/mdx";
+import {useState} from "react";
+import {NavigationStateProvider, useNavigationState} from "@/components/NavigationState";
+import ChevronDownIcon from "@/components/icons/ChevronDownIcon";
 
 export const docsNavigation = [
     {
@@ -19,7 +27,24 @@ export const docsNavigation = [
         title: 'How-to guides',
         links: [
             { title: 'Getting started', href: '/how-to/getting-started' },
-            { title: 'Installation', href: '/how-to/installation' },
+            { title: 'Installation', href: '/how-to/installation'},
+            /*{
+                title: 'Nested Nav Item',
+                isOpen: true,
+                links: [
+                    { title: 'Quickstart guide', href: '/selfhosted/selfhosted-quickstart' },
+                    { title: 'Advanced guide', href: '/selfhosted/selfhosted-guide' },
+                    { title: 'Management SQLite Store', href: '/selfhosted/sqlite-store'},
+                    {
+                        title: 'Deeply Nested Nav Item',
+                        links: [
+                            { title: 'NetBird vs. traditional VPN', href: '/about-netbird/netbird-vs-traditional-vpn' },
+                            { title: 'Other', href: '/about-netbird/other' },
+                            { title: 'FAQ', href: '/about-netbird/faq' },
+                        ]
+                    },
+                ]
+            },*/
             { title: 'Add machines to your network', href: '/how-to/add-machines-to-your-network' },
             { title: 'Add users to your network', href: '/how-to/add-users-to-your-network' },
             { title: 'Use setup keys for automation', href: '/how-to/register-machines-using-setup-keys' },
@@ -31,6 +56,7 @@ export const docsNavigation = [
             { title: 'Access NetBird API', href: '/how-to/access-netbird-public-api' },
             { title: 'Examples', href: '/how-to/examples' },
             { title: 'CLI', href: '/how-to/cli' },
+
         ],
     },
     {
@@ -45,6 +71,7 @@ export const docsNavigation = [
 
 ]
 
+
 export function NavigationDocs({className}) {
   return (
     <nav className={className}>
@@ -56,11 +83,13 @@ export function NavigationDocs({className}) {
           <TopLevelNavItem href="https://github.com/netbirdio/netbird">Github</TopLevelNavItem>
           <TopLevelNavItem href="https://join.slack.com/t/netbirdio/shared_invite/zt-vrahf41g-ik1v7fV8du6t0RwxSrJ96A">Support</TopLevelNavItem>
           {docsNavigation.map((group, groupIndex) => (
-              <NavigationGroup
-                  key={group.title}
-                  group={group}
-                  className={groupIndex === 0 && 'md:mt-0'}
-              />
+              <NavigationStateProvider key={group.title} index={groupIndex}>
+                  <NavigationGroup
+                      group={group}
+                      index={groupIndex}
+                      className={groupIndex === 0 && 'md:mt-0'}
+                  />
+              </NavigationStateProvider>
           ))}
           <li className="sticky bottom-0 z-10 mt-6 min-[416px]:hidden">
               <Button href="https://app.netbird.io/" variant="filled" className="w-full">
@@ -72,44 +101,97 @@ export function NavigationDocs({className}) {
   )
 }
 
-function NavigationGroup({ group, className }) {
-    let router = useRouter()
+const findActiveGroupIndex = (group, pathname) => {
+    let activeIndex = -1;
+    group.links.forEach((link, index) => {
+        if (link.href === pathname) {
+            activeIndex = index;
+        } else if (link.links) {
+            const childIndex = findActiveGroupIndex(link, pathname);
+            if (childIndex !== -1) {
+                activeIndex = index;
+            }
+        }
+    });
+    return activeIndex;
+}
 
-    let isActiveGroup =
-        group.links.findIndex((link) => link.href === router.pathname) !== -1
+
+function NavigationGroup({ group, className, hasChildren }) {
+    let router = useRouter()
+    let isActiveGroup = findActiveGroupIndex(group, router.pathname) !== -1;
+    const [isOpen, setIsOpen] = useState(group.isOpen ? group.isOpen :!hasChildren);
+    const [, setActiveHighlight] = useNavigationState();
 
     return (
-        <li className={clsx('relative mt-6', className)}>
+
+        <li className={clsx('relative', className, hasChildren ? "" : "mt-6")}>
             <motion.h2
-                layout="position"
-                className="text-xs font-semibold text-zinc-900 dark:text-white"
+                layout={"size"}
+                className={clsx(
+                    "flex justify-between items-center gap-2 group",
+                    hasChildren ? "text-zinc-700 select-none py-1 pr-3 hover:text-zinc-900 dark:text-zinc-300 font-medium dark:hover:text-white text-sm cursor-pointer" : "text-xs font-semibold text-zinc-900 dark:text-white"
+                    )}
+                onClick={() => {
+                    setIsOpen(!isOpen)
+                    if(!isOpen) {
+                        router.push(group.links[0].href)
+                        setActiveHighlight()
+                    }else {
+                        setActiveHighlight(group.title)
+                    }
+                }}
+                data-nb-link={group.title}
             >
                 {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} />}
             </motion.h2>
-            <div className="relative mt-3 pl-2">
-                <AnimatePresence >
-                    {isActiveGroup && (
-                        <VisibleSectionHighlight group={group} pathname={router.pathname} />
-                    )}
+            <div className={clsx("relative", hasChildren ? "" : "mt-3 pl-2")}>
+                {!hasChildren &&
+                    <>
+                        <AnimatePresence >
+                            {isActiveGroup && (
+                                <VisibleSectionHighlight group={group} pathname={router.pathname} />
+                            )}
+                        </AnimatePresence>
+                        <motion.div
+                            layout
+                            className="absolute inset-y-0 left-2 w-px bg-zinc-900/10 dark:bg-white/5"
+                        />
+                        <AnimatePresence initial={false}>
+                            {isActiveGroup && (
+                                <ActivePageMarker group={group} pathname={router.pathname}/>
+                            )}
+                        </AnimatePresence>
+                    </>
+                }
+
+                <AnimatePresence mode={"wait"} initial={false}>
+                    {isOpen && <motion.ul
+                        role="list"
+                        initial={{ opacity: 0 }}
+                        animate={{
+                            opacity: 1,
+                            transition: { delay: 0.05 },
+                        }}
+                        exit={{
+                            opacity: 0,
+                            transition: { duration: 0.15 },
+                        }}
+                        className="border-l border-transparent">
+                            {group.links.map((link) =>  {
+                                return link.href ?
+                                    <motion.li key={link.href} layout={"position"} className="relative">
+                                        <NavLink href={link.href} active={link.href === router.pathname} links={link.links}>
+                                            {link.title}
+                                        </NavLink>
+                                    </motion.li>
+                                    :
+                                    <NavigationGroup className={"ml-4"} key={link.title + isOpen} group={link} hasChildren={true} />
+                            })}
+                    </motion.ul>}
+
                 </AnimatePresence>
-                <motion.div
-                    layout
-                    className="absolute inset-y-0 left-2 w-px bg-zinc-900/10 dark:bg-white/5"
-                />
-                <AnimatePresence initial={false}>
-                    {isActiveGroup && (
-                        <ActivePageMarker group={group} pathname={router.pathname} />
-                    )}
-                </AnimatePresence>
-                <ul role="list" className="border-l border-transparent">
-                    {group.links.map((link) => (
-                        <motion.li key={link.href} layout="position" className="relative">
-                            <NavLink href={link.href} active={link.href === router.pathname}>
-                                {link.title}
-                            </NavLink>
-                        </motion.li>
-                    ))}
-                </ul>
             </div>
         </li>
     )

src/components/NavigationState.jsx

@@ -0,0 +1,53 @@
+import {createContext, useContext, useEffect, useState} from "react";
+import {useRouter} from "next/router";
+
+const NavigationStateContext = createContext([]);
+
+const timeout = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+export function NavigationStateProvider({ children,index }) {
+    const [activeIndex, setActiveIndex] = useState(0);
+    const router = useRouter();
+
+    const setActiveHighlight = async (groupTitle = undefined) => {
+        await timeout(250);
+
+        const links = [];
+        document.querySelectorAll(`.outer-wrapper-${index} [data-nb-link]`).forEach((link) => {
+            links.push(link.getAttribute('data-nb-link'));
+        });
+        links.shift();
+
+        const activeIndex = links.findIndex((link) => link === "1");
+        const activeGroupIndex = links.findIndex((link) => link === groupTitle);
+
+        if(activeGroupIndex !== -1 && activeIndex === -1){
+            setActiveIndex(activeGroupIndex);
+        }else if(activeIndex !== -1){
+            setActiveIndex(activeIndex);
+        }
+        return Promise.resolve();
+    }
+
+    useEffect(() => {
+        setActiveHighlight();
+    }, [router.pathname]);
+
+    return (
+        <NavigationStateContext.Provider value={[activeIndex, setActiveHighlight]}>
+            <div className={`outer-wrapper-${index}`}>
+                {children}
+            </div>
+        </NavigationStateContext.Provider>
+    );
+}
+
+export function useNavigationState() {
+    const context = useContext(NavigationStateContext);
+    if (context === undefined) {
+        throw new Error(
+            'useNavigationState must be used within a NavigationStateProvider'
+        );
+    }
+    return context;
+}

src/components/icons/ChevronDownIcon.jsx

@@ -0,0 +1,8 @@
+
+export default function ChevronDownIcon({className, size= 16 }) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" height={size} width={size} viewBox="0 0 512 512" className={className} fill={"white"}>
+            <path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/>
+        </svg>
+    );
+};