"use client"; import { useCallback, useEffect, useLayoutEffect, useRef, useState, } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { cn } from "@/lib/utils"; type NavItem = { id: string; label: string; columns: { header: string; links: { label: string; description: string }[]; }[]; }; const navItems: NavItem[] = [ { id: "products", label: "Products", columns: [ { header: "Header", links: [ { label: "Sub header", description: "Example" }, { label: "Sub header", description: "Example" }, { label: "Sub header", description: "Example" }, { label: "Sub header", description: "Example" }, { label: "Sub header", description: "Example" }, { label: "Sub header", description: "Example" }, ], }, { header: "Header", links: [ { label: "Sub header", description: "Example" }, { label: "Sub header", description: "Example" }, { label: "Sub header", description: "Example" }, { label: "Sub header", description: "Example" }, { label: "Sub header", description: "Example" }, { label: "Sub header", description: "Example" }, ], }, { header: "Header", links: [ { label: "Sub header", description: "Example" }, { label: "Sub header", description: "Example" }, { label: "Sub header", description: "Example" }, { label: "Sub header", description: "Example" }, { label: "Sub header", description: "Example" }, { label: "Sub header", description: "Example" }, ], }, ], }, { id: "solutions", label: "Solutions", columns: [ { header: "Header", links: [ { label: "Sub header", description: "Example" }, { label: "Sub header", description: "Example" }, { label: "Sub header", description: "Example" }, ], }, { header: "Header", links: [ { label: "Sub header", description: "Example" }, { label: "Sub header", description: "Example" }, { label: "Sub header", description: "Example" }, ], }, { header: "Header", links: [ { label: "Sub header", description: "Example" }, { label: "Sub header", description: "Example" }, { label: "Sub header", description: "Example" }, ], }, ], }, { id: "resources", label: "Resources", columns: [ { header: "Header", links: [ { label: "Sub header", description: "Example" }, { label: "Sub header", description: "Example" }, { label: "Sub header", description: "Example" }, { label: "Sub header", description: "Example" }, ], }, { header: "Header", links: [ { label: "Sub header", description: "Example" }, { label: "Sub header", description: "Example" }, { label: "Sub header", description: "Example" }, { label: "Sub header", description: "Example" }, ], }, { header: "Header", links: [ { label: "Sub header", description: "Example" }, { label: "Sub header", description: "Example" }, { label: "Sub header", description: "Example" }, { label: "Sub header", description: "Example" }, ], }, ], }, ]; const ChevronIcon = ({ isOpen }: { isOpen: boolean }) => ( ); const ArrowIcon = () => ( ); export default function StripeNav01() { const [activeId, setActiveId] = useState(null); const [direction, setDirection] = useState(0); const [containerHeight, setContainerHeight] = useState(null); const [measuredHeights, setMeasuredHeights] = useState< Record >({}); const timeoutRef = useRef(null); const measureRefs = useRef>({}); const activeItem = navItems.find((item) => item.id === activeId); const setMeasureRef = useCallback( (id: string) => (element: HTMLDivElement | null) => { measureRefs.current[id] = element; }, [], ); const measureHeights = useCallback(() => { const nextHeights: Record = {}; navItems.forEach((item) => { const element = measureRefs.current[item.id]; if (!element) return; nextHeights[item.id] = element.getBoundingClientRect().height; }); setMeasuredHeights(nextHeights); }, []); useLayoutEffect(() => { measureHeights(); }, [measureHeights]); useEffect(() => { if (!activeId) return; const height = measuredHeights[activeId]; if (!height) return; setContainerHeight(height); }, [activeId, measuredHeights]); useEffect(() => { const handleResize = () => measureHeights(); window.addEventListener("resize", handleResize); return () => window.removeEventListener("resize", handleResize); }, [measureHeights]); const handleEnter = useCallback((id: string) => { if (timeoutRef.current) clearTimeout(timeoutRef.current); setActiveId((prev) => { if (prev && prev !== id) { const prevIndex = navItems.findIndex((item) => item.id === prev); const newIndex = navItems.findIndex((item) => item.id === id); setDirection(newIndex > prevIndex ? 1 : -1); } else { setDirection(0); } return id; }); }, []); const handleLeave = useCallback(() => { timeoutRef.current = setTimeout(() => { setActiveId(null); setDirection(0); }, 100); }, []); const renderColumns = useCallback((item: NavItem) => { return (

{item.columns.map((column, i) => (

{column.header}

{link.label} {link.description}

))}

); }, []); return (

{/* Nav Bar */}

Logo

{navItems.map((item) => ( ))}

Talk to sales

{/* Dropdown */} {activeId && activeItem && ( timeoutRef.current && clearTimeout(timeoutRef.current) } > {/* Container */} {/* Content - slides with following effect */} {renderColumns(activeItem)} )} {/* Hidden measurement layer */}

{navItems.map((item) => (

{renderColumns(item)}

))}

Hover over the navigation items to see the animation

); }

Stripe Nav

Tech

Category