Line Nav

1/**
2 * This component is inspired by Devouring Details and Skiper UI.
3 */
4 
5"use client"
6 
7import { memo, useEffect, useRef } from "react"
8import { motion } from "motion/react"
9 
10import { cn } from "@/lib/utils"
11 
12const lineVariants = {
13  normal: { width: 24 },
14  active: { width: 40 },
15  hover: { width: 40 },
16}
17 
18export type LineNavItem = {
19  title: string
20  href: string
21}
22 
23export type LineNavProps = {
24  className?: string
25  /** @fumadocsHref #linenavitem */
26  items: LineNavItem[]
27  /** Href of the active item. */
28  activeHref?: string
29  /** Scroll the active item into view on mount. */
30  scrollActiveIntoView?: boolean
31  /** Called when an item is clicked. */
32  onItemClick?: (
33    item: LineNavItem,
34    event: React.MouseEvent<HTMLAnchorElement>
35  ) => void
36}
37 
38export function LineNav({
39  className,
40  items,
41  activeHref,
42  scrollActiveIntoView = true,
43  onItemClick,
44}: LineNavProps) {
45  const activeItemRef = useRef<HTMLAnchorElement | null>(null)
46 
47  useEffect(() => {
48    if (scrollActiveIntoView) {
49      activeItemRef.current?.scrollIntoView({ block: "center" })
50    }
51  }, [scrollActiveIntoView])
52 
53  return (
54    <nav
55      className={cn("flex flex-col gap-2 py-5.25", className)}
56      style={
57        {
58          "--line-nav-width": `${lineVariants.normal.width}px`,
59        } as React.CSSProperties
60      }
61    >
62      {items.map((item, index) => {
63        const isActive = item.href === activeHref
64 
65        return (
66          <LineNavItem
67            key={item.href}
68            ref={isActive ? activeItemRef : undefined}
69            title={item.title}
70            href={item.href}
71            active={isActive}
72            isLast={index === items.length - 1}
73            onClick={
74              onItemClick ? (event) => onItemClick(item, event) : undefined
75            }
76          />
77        )
78      })}
79    </nav>
80  )
81}
82 
83const LineNavItem = memo(function LineNavItem({
84  ref,
85  title,
86  href,
87  active = false,
88  isLast = false,
89  onClick,
90}: {
91  ref?: React.Ref<HTMLAnchorElement>
92  title: string
93  href: string
94  active?: boolean
95  isLast?: boolean
96  onClick?: React.MouseEventHandler<HTMLAnchorElement>
97}) {
98  return (
99    <>
100      {/*
101        Rendered as a plain anchor to stay framework-agnostic. For client-side
102        navigation in Next.js, swap `motion.a` for `motion.create(Link)`
103        (import Link from "next/link").
104      */}
105      <motion.a
106        ref={ref}
107        aria-current={active ? "page" : undefined}
108// … truncated