Notch Nav

1"use client";
2 
3import {
4  type ReactNode,
5  createContext,
6  useContext,
7  useEffect,
8  useRef,
9  useState,
10} from "react";
11 
12import { AnimatePresence, type Variants, motion, stagger } from "motion/react";
13 
14import { cn } from "@/lib/utils";
15 
16interface NotchNavContextValue {
17  open: boolean;
18  toggle: () => void;
19  contentRef: React.RefObject<HTMLDivElement | null>;
20  contentHeight: number;
21  offsetY: number;
22  setOffsetY: (y: number) => void;
23}
24 
25const NotchNavContext = createContext<NotchNavContextValue | null>(null);
26 
27const useNotchNav = () => {
28  const ctx = useContext(NotchNavContext);
29  if (!ctx) {
30    throw new Error("NotchNav components must be used within <NotchNav />");
31  }
32  return ctx;
33};
34 
35const NotchNavContentContext = createContext<boolean | null>(null);
36 
37const useNotchNavContent = () => {
38  const ctx = useContext(NotchNavContentContext);
39  if (!ctx) {
40    throw new Error("<NotchNavItem /> must be used within <NotchNavContent />");
41  }
42  return ctx;
43};
44 
45const NotchNav = ({ children }: { children: ReactNode }) => {
46  const [open, setOpen] = useState(false);
47  const toggle = () => setOpen((p) => !p);
48 
49  const contentRef = useRef<HTMLDivElement>(null);
50  const [contentHeight, setContentHeight] = useState(0);
51 
52  const [offsetY, setOffsetY] = useState(20);
53 
54  useEffect(() => {
55    if (!open || !contentRef.current) return;
56 
57    const { height } = contentRef.current.getBoundingClientRect();
58    setContentHeight((prev) => (prev !== height ? height : prev));
59  }, [open]);
60 
61  return (
62    <NotchNavContext.Provider
63      value={{ open, toggle, contentRef, contentHeight, offsetY, setOffsetY }}
64    >
65      <div className="relative flex flex-col items-center">{children}</div>
66    </NotchNavContext.Provider>
67  );
68};
69 
70interface PathProps {
71  d: string;
72  variants: Variants;
73  transition?: { duration: number };
74}
75 
76const Path = (props: PathProps) => (
77  <motion.path
78    fill="transparent"
79    strokeWidth="1"
80    stroke="#171717"
81    strokeLinecap="round"
82    {...props}
83  />
84);
85 
86const NotchNavTrigger = ({ className }: { className?: string }) => {
87  const { open, toggle, contentHeight, offsetY } = useNotchNav();
88 
89  return (
90    <motion.button
91      type="button"
92      aria-expanded={open}
93      onClick={toggle}
94      onKeyDown={(e) => {
95        if (e.key === "Enter" || e.key === " ") {
96          e.preventDefault();
97          toggle();
98        }
99      }}
100      initial={{ y: 0 }}
101      animate={{ y: open ? contentHeight + offsetY : 0 }}
102      transition={{
103// … truncated