load api subendpoints

src/components/NavigationAPI.jsx

@@ -105,15 +105,16 @@ export function ActivePageMarker({ group, pathname }) {
   )
 }
 
-function NavigationGroup({ group, className }) {
+function NavigationGroup({ group, className, tableOfContents }) {
   // If this is the mobile navigation then we always render the initial
   // state, so that the state does not change during the close animation.
   // The state will still update when we re-open (re-render) the navigation.
-  let isInsideMobileNavigation = useIsInsideMobileNavigation()
-  let [router, sections] = useInitialValue(
-    [useRouter(), useSectionStore((s) => s.sections)],
-    isInsideMobileNavigation
-  )
+  // let isInsideMobileNavigation = useIsInsideMobileNavigation()
+  let router = useRouter()
+  // let [router, sections] = useInitialValue(
+  //   [useRouter(), useSectionStore((s) => s.sections)],
+  //   isInsideMobileNavigation
+  // )
 
   let isActiveGroup =
     group.links.findIndex((link) => link.href === router.pathname) !== -1
@@ -127,11 +128,11 @@ function NavigationGroup({ group, className }) {
         {group.title}
       </motion.h2>
       <div className="relative mt-3 pl-2">
-        <AnimatePresence initial={!isInsideMobileNavigation}>
-          {isActiveGroup && (
-            <VisibleSectionHighlight group={group} pathname={router.pathname} />
-          )}
-        </AnimatePresence>
+        {/*<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"
@@ -147,8 +148,8 @@ function NavigationGroup({ group, className }) {
               <NavLink href={link.href} active={link.href === router.pathname}>
                 {link.title}
               </NavLink>
-              <AnimatePresence mode="popLayout" initial={false}>
-                {link.href === router.pathname && sections.length > 0 && (
+              {/*<AnimatePresence mode="popLayout" initial={false}>*/}
+                {link.href === router.pathname && (
                   <motion.ul
                     role="list"
                     initial={{ opacity: 0 }}
@@ -161,7 +162,8 @@ function NavigationGroup({ group, className }) {
                       transition: { duration: 0.15 },
                     }}
                   >
-                    {sections.map((section) => (
+                    {console.log(tableOfContents.tableOfContents)}
+                    {tableOfContents.tableOfContents.map((section) => (
                       <li key={section.id}>
                         <NavLink
                           href={`${link.href}#${section.id}`}
@@ -174,7 +176,7 @@ function NavigationGroup({ group, className }) {
                     ))}
                   </motion.ul>
                 )}
-              </AnimatePresence>
+              {/*</AnimatePresence>*/}
             </motion.li>
           ))}
         </ul>
@@ -183,73 +185,35 @@ function NavigationGroup({ group, className }) {
   )
 }
 
-export const docsNavigation = [
-  {
-    title: 'About NetBird',
-    links: [
-      { title: 'Why Wireguard with NetBird?', href: '/docs/about-netbird/why-wireguard-with-netbird' },
-      { title: 'How Netbird Works', href: '/docs/about-netbird/how-netbird-works' },
-      { title: 'NetBird vs. Traditional VPN', href: '/docs/about-netbird/netbird-vs-traditional-vpn' },
-      { title: 'Other', href: '/docs/about-netbird/other' },
-      { title: 'FAQ', href: '/docs/about-netbird/faq' },
-    ],
-  },
-  {
-    title: 'How-to',
-    links: [
-      { title: 'Getting Started', href: '/docs/how-to/getting-started' },
-      { title: 'Peers', href: '/docs/how-to/peers' },
-      { title: 'Setup Keys', href: '/docs/how-to/setup-keys' },
-      { title: 'Access Control', href: '/docs/how-to/access-control' },
-      { title: 'Network Routes', href: '/docs/how-to/network-routes' },
-      { title: 'DNS', href: '/docs/how-to/dns' },
-      { title: 'Users', href: '/docs/how-to/users' },
-      { title: 'Activity', href: '/docs/how-to/activity' },
-      { title: 'Settings', href: '/docs/how-to/settings' },
-      { title: 'Examples', href: '/docs/how-to/examples' },
-      { title: 'CLI', href: '/docs/how-to/cli' },
-    ],
-  },
-  {
-    title: 'Self-Hosted',
-    links: [
-      { title: 'Installation Guide', href: '/docs/selfhosted/selfhosted-guide' },
-      { title: 'Identity Providers', href: '/docs/selfhosted/identity-providers' },
-    ],
-  },
-
-]
-
 export const apiNavigation = [
   {
     title: 'Guides',
     links: [
-      { title: 'Quickstart', href: '/ipa/quickstart' },
-      { title: 'Authentication', href: '/ipa/authentication' },
-      { title: 'Errors', href: '/ipa/errors' },
+      { title: 'Quickstart', href: '/ipa/guides/quickstart' },
+      { title: 'Authentication', href: '/ipa/guides/authentication' },
+      { title: 'Errors', href: '/ipa/guides/errors' },
       // { title: 'Events', href: '/accounts' },
     ],
   },
   {
     title: 'Resources',
     links: [
-      { title: 'Accounts', href: '/ipa/accounts' },
-      { title: 'Users', href: '/ipa/users' },
-      { title: 'Tokens', href: '/ipa/tokens' },
-      { title: 'Peers', href: '/ipa/peers' },
-      { title: 'Setup Keys', href: '/ipa/setup-keys' },
-      { title: 'Groups', href: '/ipa/groups' },
-      { title: 'Rules', href: '/ipa/rules' },
-      { title: 'Policies', href: '/ipa/policies' },
-      { title: 'Routes', href: '/ipa/routes' },
-      { title: 'DNS', href: '/ipa/dns' },
-      { title: 'Events', href: '/ipa/events' },
+      { title: 'Accounts', href: '/ipa/resources/accounts' },
+      { title: 'Users', href: '/ipa/resources/users' },
+      { title: 'Tokens', href: '/ipa/resources/tokens' },
+      { title: 'Peers', href: '/ipa/resources/peers' },
+      { title: 'Setup Keys', href: '/ipa/resources/setup-keys' },
+      { title: 'Groups', href: '/ipa/resources/groups' },
+      { title: 'Rules', href: '/ipa/resources/rules' },
+      { title: 'Policies', href: '/ipa/resources/policies' },
+      { title: 'Routes', href: '/ipa/resources/routes' },
+      { title: 'DNS', href: '/ipa/resources/dns' },
+      { title: 'Events', href: '/ipa/resources/events' },
     ],
   },
 ]
 
-export function NavigationAPI(props) {
-  let router = useRouter()
+export function NavigationAPI(tableOfContents, props) {
   return (
     <nav {...props}>
       <ul role="list">
@@ -260,17 +224,11 @@ export function NavigationAPI(props) {
         <TopLevelNavItem href="https://github.com/netbirdio/netbird">Github</TopLevelNavItem>
         <TopLevelNavItem href="https://join.slack.com/t/netbirdio/shared_invite/zt-vrahf41g-ik1v7fV8du6t0RwxSrJ96A">Support</TopLevelNavItem>
         {
-          router.route.startsWith('/docs') && docsNavigation.map((group, groupIndex) => (
-          <NavigationGroup
-            key={group.title}
-            group={group}
-            className={groupIndex === 0 && 'md:mt-0'}
-          />
-          )) ||
-          router.route.startsWith('/ipa') && apiNavigation.map((group, groupIndex) => (
+          apiNavigation.map((group, groupIndex) => (
           <NavigationGroup
             key={group.title}
             group={group}
+            tableOfContents={tableOfContents}
             className={groupIndex === 0 && 'md:mt-0'}
           />
           ))