From 5a51ba76cb28dc0ba8cb41166b84ccebdb3c1727 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julia=20R=C3=B6=C3=9Fchen?= Date: Thu, 11 Jan 2024 18:37:38 +0100 Subject: [PATCH] change menu structure --- src/components/NavigationDocs.jsx | 505 ++++++++++++++++++++---------- 1 file changed, 332 insertions(+), 173 deletions(-) diff --git a/src/components/NavigationDocs.jsx b/src/components/NavigationDocs.jsx index 6005db85..e156d398 100644 --- a/src/components/NavigationDocs.jsx +++ b/src/components/NavigationDocs.jsx @@ -1,10 +1,10 @@ import { useRouter } from 'next/router' import clsx from 'clsx' import { - ActivePageMarker, - NavLink, - TopLevelNavItem, - VisibleSectionHighlight + ActivePageMarker, + NavLink, + TopLevelNavItem, + VisibleSectionHighlight } from "@/components/NavigationAPI"; import {AnimatePresence, motion} from "framer-motion"; import {Button} from "@/components/mdx"; @@ -12,190 +12,349 @@ import {useState} from "react"; import {NavigationStateProvider, useNavigationState} from "@/components/NavigationState"; import ChevronDownIcon from "@/components/icons/ChevronDownIcon"; -export const docsNavigation = [ - { - title: 'About NetBird', - links: [ - { title: 'Why WireGuard with NetBird?', href: '/about-netbird/why-wireguard-with-netbird' }, - { title: 'How NetBird works', href: '/about-netbird/how-netbird-works' }, - { 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: 'How-to guides', - links: [ - { title: 'Getting started', href: '/how-to/getting-started' }, - { 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: 'Approve peers', href: '/how-to/approve-peers' }, - { 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' }, - { title: 'Manage network access', href: '/how-to/manage-network-access' }, - { title: 'Enforce periodic authentication', href: '/how-to/enforce-periodic-user-authentication' }, - { title: 'Enable post-quantum cryptography', href: '/how-to/enable-post-quantum-cryptography' }, - { title: 'Route traffic to private networks', href: '/how-to/routing-traffic-to-private-networks' }, - { title: 'Manage DNS in your network', href: '/how-to/manage-dns-in-your-network' }, - { title: 'Monitor system and network activity', href: '/how-to/monitor-system-and-network-activity' }, - { title: 'Access NetBird API', href: '/how-to/access-netbird-public-api' }, - { title: 'Examples', href: '/how-to/examples' }, - { title: 'CLI', href: '/how-to/cli' }, - { title: 'Delete your NetBird account', href: '/how-to/delete-account' }, - ], - }, - { - title: 'Self-hosting NetBird', - links: [ - { title: 'Quickstart guide', href: '/selfhosted/selfhosted-quickstart' }, - { title: 'Advanced guide', href: '/selfhosted/selfhosted-guide' }, - { title: 'Management SQLite Store', href: '/selfhosted/sqlite-store'}, - { title: 'Supported IdPs', href: '/selfhosted/identity-providers' }, - ], - }, +export const docsNavigation = [ + { + title: '', + links: [ + { title: 'Welcome', href: '/about-netbird/why-wireguard-with-netbird' }, + { title: 'Whats new in version xx', href: '/about-netbird/how-netbird-works' }, + { title: 'Release notes', href: '/about-netbird/netbird-vs-traditional-vpn' }, + + ], + }, + { + title: 'GETTING STARTED', + links: [ + { title: 'Introduction', href: '/how-to/getting-started' }, + { title: 'How NetBird works', href: '/how-to/installation'}, + { title: 'NetBird architecture', href: '/how-to/add-machines-to-your-network' }, + { title: 'NetBird vs. traditional VPN', href: '/how-to/approve-peers' }, + { title: 'Why WireGuard with NetBird', href: '/how-to/add-users-to-your-network' }, + { title: 'Requirements and prerequisites', href: '/how-to/register-machines-using-setup-keys' }, + { + title: 'Install NetBird', + isOpen: false, + links: [ + { title: 'Linux', href: '/selfhosted/selfhosted-quickstart' }, + { title: 'NixOS', href: '/selfhosted/selfhosted-guide' }, + { title: 'MacOS', href: '/selfhosted/sqlite-store'}, + { title: 'Homebrew install', href: '/selfhosted/sqlite-store'}, + { title: 'Windows', href: '/selfhosted/sqlite-store'}, + { title: 'Android', href: '/selfhosted/sqlite-store'}, + { title: 'Binary Install', href: '/selfhosted/sqlite-store'}, + { title: 'Troubleshooting', href: '/selfhosted/sqlite-store'}, + + ] + }, + { title: 'Update NetBird', href: '/how-to/enforce-periodic-user-authentication' }, + + + + ], + }, + { + title: 'MANAGE NETBIRD', + links: [ + { + title: 'Peers', + isOpen: false, + links: [ + { title: 'Add peers to your network', href: '/selfhosted/selfhosted-quickstart' }, + { title: 'Approve peers', href: '/selfhosted/selfhosted-guide' }, + { + title: 'Setup keys', + links: [ + { title: 'Use setup keys for automation', href: '/about-netbird/netbird-vs-traditional-vpn' }, + { title: 'Other', href: '/about-netbird/other' }, + { title: 'FAQ', href: '/about-netbird/faq' }, + ] + }, + ] + }, + { + title: 'Access Control', + isOpen: false, + links: [ + { + title: 'Groups', + links: [ + { title: 'Adding peers to groups', href: '/about-netbird/netbird-vs-traditional-vpn' }, + ] + }, + { + title: 'Rules', + links: [ + { title: 'The default rule', href: '/about-netbird/netbird-vs-traditional-vpn' }, + { title: 'Create rules', href: '/about-netbird/netbird-vs-traditional-vpn' }, + { + title: 'Manage rules', + links: [ + { title: 'Update rules', href: '/about-netbird/netbird-vs-traditional-vpn' }, + { title: 'Disable rules', href: '/about-netbird/netbird-vs-traditional-vpn' }, + { title: 'Delete rules', href: '/about-netbird/netbird-vs-traditional-vpn' }, + + ] + }, + ] + }, + ] + }, + { + title: 'Network Routes', + isOpen: false, + links: [ + { title: 'What are network routes', href: '/selfhosted/selfhosted-quickstart' }, + { + title: 'Manage network routes', + links: [ + { title: 'Create a network route', href: '/about-netbird/netbird-vs-traditional-vpn' }, + { title: 'Create a network route with routing group', href: '/about-netbird/other' }, + { title: 'Create highly available routes', href: '/about-netbird/faq' }, + ] + }, + ] + }, + { + title: 'DNS', + isOpen: false, + links: [ + { title: 'DNS Settings', href: '/selfhosted/selfhosted-quickstart' }, + { + title: 'Name Servers', + links: [ + { title: 'Manage nameserver groups', href: '/about-netbird/netbird-vs-traditional-vpn' }, + ] + }, + ] + }, + { + title: 'Team', + isOpen: false, + links: [ + { title: 'Service Users', href: '/selfhosted/selfhosted-quickstart' }, + { + title: 'DNS', + isOpen: true, + links: [ + { title: 'Users', href: '/selfhosted/selfhosted-quickstart' }, + { + title: 'Add users to your network', + links: [ + { title: 'Direct user invite', href: '/about-netbird/netbird-vs-traditional-vpn' }, + { title: 'Indirect user invite', href: '/about-netbird/netbird-vs-traditional-vpn' }, + ] + }, + ] + }, + ] + }, + { + title: 'Settings', + isOpen: false, + links: [ + { + title: 'Authentication', + links: [ + { title: 'Enforce periodic authentication', href: '/about-netbird/netbird-vs-traditional-vpn' }, + { title: 'Configure authentication individually per peer', href: '/about-netbird/other' }, + ] + }, + ] + }, + { + title: 'Activity', + isOpen: false, + links: [ + { + title: 'tbd', + links: [ + { title: 'tbd', href: '/about-netbird/netbird-vs-traditional-vpn' }, + { title: 'tbd', href: '/about-netbird/other' }, + ] + }, + ] + }, + ], + + }, + { + title: 'USING NETBIRD', + links: [ + { title: 'Usecase 1', href: '/selfhosted/selfhosted-quickstart' }, + { title: 'Usecase 2', href: '/selfhosted/sqlite-store'}, + ], + + +}, +{ + title: 'Self-hosting NetBird', + links: [ + { title: 'Quickstart guide', href: '/selfhosted/selfhosted-quickstart' }, + { title: 'Advanced guide', href: '/selfhosted/selfhosted-guide' }, + { title: 'Management SQLite Store', href: '/selfhosted/sqlite-store'}, + { title: 'Supported IdPs', href: '/selfhosted/identity-providers' }, + ], + + +}, +{ + title: 'FAQ', + links: [ + { title: 'tbd', href: '/selfhosted/selfhosted-quickstart' }, + { title: 'tbd', href: '/selfhosted/selfhosted-guide' }, + { title: 'tbd', href: '/selfhosted/sqlite-store'}, + ], + + + },{ + title: 'GET MORE HELP', + links: [ + { title: 'tbd', href: '/selfhosted/selfhosted-quickstart' }, + { title: 'tbd', href: '/selfhosted/selfhosted-guide' }, + { title: 'tbd', href: '/selfhosted/sqlite-store'}, + ], + + + }, ] + + + export function NavigationDocs({className}) { - return ( - - ) + return ( + + ) } + 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 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; } + + 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(); + let router = useRouter() + let isActiveGroup = findActiveGroupIndex(group, router.pathname) !== -1; + const [isOpen, setIsOpen] = useState(group.isOpen ? group.isOpen :!hasChildren); + const [, setActiveHighlight] = useNavigationState(); - return ( -
  • - { - setIsOpen(!isOpen) - if(!isOpen) { - router.push(group.links[0].href) - setActiveHighlight() - }else { - setActiveHighlight(group.title) - } - }} - data-nb-link={group.title} - > - {group.title} - {hasChildren && } - -
    - {!hasChildren && - <> - - {isActiveGroup && ( - - )} - - - - {isActiveGroup && ( - - )} - - - } + return ( - - {isOpen && - {group.links.map((link) => { - return link.href ? - - - {link.title} - - - : - - })} - } - -
    -
    • - ) +
  • + { + setIsOpen(!isOpen) + if(!isOpen) { + router.push(group.links[0].href) + setActiveHighlight() + }else { + setActiveHighlight(group.title) + } + }} + data-nb-link={group.title} + > + {group.title} + {hasChildren && } + +
    + {!hasChildren && + <> + + {isActiveGroup && ( + + )} + + + + {isActiveGroup && ( + + )} + + + } + + + + {isOpen && + {group.links.map((link) => { + return link.href ? + + + {link.title} + + + : + + })} + } + + + +
    +
    • + ) } + + +