sendnrw/netbird-docs
2
0
Fork 0
mirror of https://github.com/netbirdio/docs.git synced 2026-04-18 16:36:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix mobile view

Browse Source
This commit is contained in:
Pascal Fischer
2023-05-10 18:29:49 +02:00
parent 292a0bf427
commit 7bf8edb5a0
7 changed files with 88 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
src/components/NavigationAPI.jsx
View File

@@ -1,20 +1,67 @@
import {useEffect, useRef, useState} from 'react'
import Link from 'next/link'
import { useRouter } from 'next/router'
import clsx from 'clsx'
import { AnimatePresence, motion, useIsPresent } from 'framer-motion'
import { Button } from '@/components/Button'
import { useIsInsideMobileNavigation } from '@/components/MobileNavigation'
import { useSectionStore } from '@/components/SectionProvider'
import { Tag } from '@/components/Tag'
import { remToPx } from '@/lib/remToPx'
import {useIsInsideMobileNavigation} from "@/components/MobileNavigation";
function useInitialValue(value, condition = true) {
let initialValue = useRef(value).current
return condition ? initialValue : value
export const apiNavigation = [
{
title: 'Guides',
links: [
{ 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/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) {
return (
<nav {...props}>
<ul role="list">
<TopLevelNavItem href="https://netbird.io/">Home</TopLevelNavItem>
<TopLevelNavItem href="/docs/introductions">Docs</TopLevelNavItem>
<TopLevelNavItem href="/ipa/introductions">API</TopLevelNavItem>
<TopLevelNavItem href="https://netbird.io/blog/">Blog</TopLevelNavItem>
<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) => (
<NavigationGroup
key={group.title}
group={group}
tableOfContents={props.tableOfContents}
className={groupIndex === 0 && 'md:mt-0'}
/>
))}
<li className="sticky bottom-0 z-10 mt-6 min-[416px]:hidden">
<Button href="https://app.netbird.io/" variant="filled" className="w-full">
Sign in
</Button>
</li>
</ul>
</nav>
)
}
export function TopLevelNavItem({ href, children }) {
return (
<li className="md:hidden">
@@ -88,15 +135,7 @@ export function ActivePageMarker({ group, pathname }) {
}
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 = useRouter()
// let [router, sections] = useInitialValue(
// [useRouter(), useSectionStore((s) => s.sections)],
// isInsideMobileNavigation
// )
let isActiveGroup =
group.links.findIndex((link) => link.href === router.pathname) !== -1
@@ -111,10 +150,10 @@ function NavigationGroup({ group, className, tableOfContents }) {
</motion.h2>
<div className="relative mt-3 pl-2">
<AnimatePresence >
{isActiveGroup && (
<VisibleSectionHighlight group={group} pathname={router.pathname} />
)}
</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"
@@ -144,7 +183,7 @@ function NavigationGroup({ group, className, tableOfContents }) {
transition: { duration: 0.15 },
}}
>
{router.route.startsWith("/ipa/resources") && tableOfContents.tableOfContents.map((section) => (
{router.route.startsWith("/ipa/resources") && tableOfContents.tableOfContents?.map((section) => (
<li key={section.id}>
<NavLink
href={`${link.href}#${section.id}`}
@@ -166,60 +205,5 @@ function NavigationGroup({ group, className, tableOfContents }) {
)
}
export const apiNavigation = [
{
title: 'Guides',
links: [
{ 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/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(tableOfContents, props) {
return (
<nav {...props}>
<ul role="list">
<TopLevelNavItem href="https://netbird.io/">Home</TopLevelNavItem>
<TopLevelNavItem href="/docs/introductions">Docs</TopLevelNavItem>
<TopLevelNavItem href="/ipa/introductions">API</TopLevelNavItem>
<TopLevelNavItem href="https://netbird.io/blog/">Blog</TopLevelNavItem>
<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) => (
<NavigationGroup
key={group.title}
group={group}
tableOfContents={tableOfContents}
className={groupIndex === 0 && 'md:mt-0'}
/>
))
}
<li className="sticky bottom-0 z-10 mt-6 min-[416px]:hidden">
<Button href="https://app.netbird.io/" variant="filled" className="w-full">
Sign in
</Button>
</li>
</ul>
</nav>
)
}