Add nested navigation links (#112)

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

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>
     )