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

partially fix current page marker

Browse Source
This commit is contained in:
Pascal Fischer
2023-05-10 14:13:23 +02:00
parent b82f8af4b1
commit 1a1bdc388d
2 changed files with 18 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/NavigationAPI.jsx
View File

@@ -51,29 +51,11 @@ export function NavLink({ href, tag, active, isAnchorLink = false, children }) {
) )
} }
function VisibleSectionHighlight({ group, pathname }) { export function VisibleSectionHighlight({ group, pathname }) {
let [sections, visibleSections] = useInitialValue( let height = remToPx(2)
[ let offset = remToPx(0)
useSectionStore((s) => s.sections), let activePageIndex = group.links.findIndex((link) => link.href === pathname)
useSectionStore((s) => s.visibleSections), let top = offset + activePageIndex * height
],
useIsInsideMobileNavigation()
)
let isPresent = useIsPresent()
let firstVisibleSectionIndex = Math.max(
0,
[{ id: '_top' }, ...sections].findIndex(
(section) => section.id === visibleSections[0]
)
)
let itemHeight = remToPx(2)
let height = isPresent
? Math.max(1, visibleSections.length) * itemHeight
: itemHeight
let top =
group.links.findIndex((link) => link.href === pathname) * itemHeight +
firstVisibleSectionIndex * itemHeight
return ( return (
<motion.div <motion.div
@@ -128,11 +110,11 @@ function NavigationGroup({ group, className, tableOfContents }) {
{group.title} {group.title}
</motion.h2> </motion.h2>
<div className="relative mt-3 pl-2"> <div className="relative mt-3 pl-2">
{/*<AnimatePresence >*/} <AnimatePresence >
{/* {isActiveGroup && (*/} {isActiveGroup && (
{/* <VisibleSectionHighlight group={group} pathname={router.pathname} />*/} <VisibleSectionHighlight group={group} pathname={router.pathname} />
{/* )}*/} )}
{/*</AnimatePresence>*/} </AnimatePresence>
<motion.div <motion.div
layout layout
className="absolute inset-y-0 left-2 w-px bg-zinc-900/10 dark:bg-white/5" className="absolute inset-y-0 left-2 w-px bg-zinc-900/10 dark:bg-white/5"
@@ -148,7 +130,7 @@ function NavigationGroup({ group, className, tableOfContents }) {
<NavLink href={link.href} active={link.href === router.pathname}> <NavLink href={link.href} active={link.href === router.pathname}>
{link.title} {link.title}
</NavLink> </NavLink>
{/*<AnimatePresence mode="popLayout" initial={false}>*/} <AnimatePresence mode="popLayout" initial={false}>
{link.href === router.pathname && ( {link.href === router.pathname && (
<motion.ul <motion.ul
role="list" role="list"
@@ -175,7 +157,7 @@ function NavigationGroup({ group, className, tableOfContents }) {
))} ))}
</motion.ul> </motion.ul>
)} )}
{/*</AnimatePresence>*/} </AnimatePresence>
</motion.li> </motion.li>
))} ))}
</ul> </ul>

7
src/components/NavigationDocs.jsx
View File

@@ -1,6 +1,6 @@
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import clsx from 'clsx' import clsx from 'clsx'
import {ActivePageMarker, NavLink, TopLevelNavItem} from "@/components/NavigationAPI"; import {ActivePageMarker, NavLink, TopLevelNavItem, VisibleSectionHighlight} from "@/components/NavigationAPI";
import {AnimatePresence, motion} from "framer-motion"; import {AnimatePresence, motion} from "framer-motion";
export const docsNavigation = [ export const docsNavigation = [
@@ -81,6 +81,11 @@ function NavigationGroup({ group, className }) {
{group.title} {group.title}
</motion.h2> </motion.h2>
<div className="relative mt-3 pl-2"> <div className="relative mt-3 pl-2">
<AnimatePresence >
{isActiveGroup && (
<VisibleSectionHighlight group={group} pathname={router.pathname} />
)}
</AnimatePresence>
<motion.div <motion.div
layout layout
className="absolute inset-y-0 left-2 w-px bg-zinc-900/10 dark:bg-white/5" className="absolute inset-y-0 left-2 w-px bg-zinc-900/10 dark:bg-white/5"