Function NavigationGroup

apps/baseai.dev/src/components/Navigation.tsx:138–277

({
	group,
	className
}: {
	group: NavigationItem;
	className?: string;
})

}

function NavigationGroup({
	group,
	className
}: {
	group: NavigationItem;
	className?: string;
}) {
	// 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 [pathname, sections] = useInitialValue(
		[usePathname(), useSectionStore(s => s.sections)],
		isInsideMobileNavigation
	);
	let isActiveGroup =
		group.links.findIndex(link => link.href === pathname) !== -1;

	// Scroll to active link
	const activeLinkRef = useRef<HTMLAnchorElement>(null);
	useEffect(() => {
		if (activeLinkRef.current) {
			const rect = activeLinkRef.current.getBoundingClientRect();
			const isInView =
				rect.top >= 0 &&
				rect.left >= 0 &&
				rect.bottom <=
					(window.innerHeight ||
						document.documentElement.clientHeight) &&
				rect.right <=
					(window.innerWidth || document.documentElement.clientWidth);

			// Only scroll if the active link is not in view
			if (!isInView) {
				activeLinkRef.current.scrollIntoView({
					behavior: 'instant'
				});
			}
		}
	}, []);

	return (
		<li className={clsx('relative mt-6', className)}>
			<motion.h2
				layout="position"
				className="text-xs font-semibold text-zinc-900 dark:text-white"
			>
				{group.isCommand ? (
					<code className="rounded-lg bg-muted/60 px-2 py-1 ring-2 ring-muted">
						{group.title}
					</code>
				) : (
					group.title
				)}
			</motion.h2>
			<div className="relative mt-3 pl-2">
				<AnimatePresence initial={!isInsideMobileNavigation}>
					{isActiveGroup && (