Floating Nav

1"use client";
2 
3import {
4  AnimatePresence,
5  motion,
6  useMotionValue,
7  useSpring,
8  useTransform,
9} from "motion/react";
10import { useRef, useState } from "react";
11import { cn } from "@/lib/utils";
12import Link from "next/link";
13 
14export interface NavItem {
15  label: string;
16  icon: React.ReactNode;
17  href: string;
18  asButton?: boolean;
19  onClick?: () => void;
20  active?: boolean;
21}
22 
23export interface NavSeparator {
24  type: "separator";
25}
26 
27export type NavEntry = NavItem | NavSeparator;
28 
29export interface FloatingNavProps {
30  items: NavEntry[];
31  iconSize?: number;
32  maxScale?: number;
33  showTooltip?: boolean;
34  className?: string;
35}
36 
37const SPRING = { mass: 0.1, stiffness: 150, damping: 12 };
38 
39function isSeparator(entry: NavEntry): entry is NavSeparator {
40  return "type" in entry && entry.type === "separator";
41}
42 
43export function FloatingNav({
44  items,
45  iconSize = 44,
46  maxScale = 1.5,
47  showTooltip = true,
48  className,
49}: FloatingNavProps) {
50  const mouseX = useMotionValue(Infinity);
51 
52  return (
53    <nav
54      aria-label="floating navigation"
55      className="fixed bottom-3 left-1/2 z-50 -translate-x-1/2"
56    >
57      <motion.div
58        initial={{ opacity: 0, y: 12, scale: 0.95 }}
59        animate={{ opacity: 1, y: 0, scale: 1 }}
60        transition={{
61          type: "spring",
62          stiffness: 260,
63          damping: 24,
64          delay: 0.05,
65        }}
66        onMouseMove={(e) => mouseX.set(e.clientX)}
67        onMouseLeave={() => mouseX.set(Infinity)}
68        style={{ height: iconSize + 16 }}
69        className={cn(
70          "flex items-end gap-1.5 rounded-full px-3 py-2",
71          "border border-neutral-200/70 bg-white/60 dark:border-neutral-700/50 dark:bg-neutral-900/70",
72          "shadow-[0_4px_24px_rgba(0,0,0,0.08)] backdrop-blur-xl dark:shadow-[0_4px_24px_rgba(0,0,0,0.4)]",
73          className
74        )}
75      >
76        {items.map((entry, index) =>
77          isSeparator(entry) ? (
78            <div
79              key={`sep-${index}`}
80              role="separator"
81              aria-orientation="vertical"
82              className="mx-0.5 h-6 w-px shrink-0 self-center bg-neutral-200 dark:bg-neutral-700"
83            />
84          ) : (
85            <DockItem
86              key={entry.label}
87              entry={entry}
88              mouseX={mouseX}
89              iconSize={iconSize}
90              maxScale={maxScale}
91              showTooltip={showTooltip}
92            />
93          )
94        )}
95      </motion.div>
96    </nav>
97  );
98}
99 
100function DockItem({
101// … truncated