61:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 62:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 63:T5cc6,import { useEffect, useId, useRef, useState } from "react"; import type { KeyboardEvent, ReactNode, RefObject } from "react"; import { AnimatePresence, motion, useReducedMotion } from "framer-motion"; /* ---------- Edit the menu here: the desktop bar and the phone menu both read from it ---------- */ type Item = { label: string; text: string; icon: string }; type NavLink = { label: string; href: string; mega?: Item[]; menu?: Item[] }; const brand = "Larkspur"; const ACTIVE = "Pricing"; // the page you are on: gets aria-current="page" const COMPACT_BELOW = 768; // the bar switches to the hamburger below this width (of its own box) const links: NavLink[] = [ { label: "Product", href: "#", mega: [ { label: "Booking pages", text: "One link clients use to pick a free hour.", icon: "M4 5h16v15H4zM4 10h16M9 3v4M15 3v4" }, { label: "Team calendars", text: "See every chair, room and person at once.", icon: "M4 6h16M4 12h16M4 18h10" }, { label: "Reminders", text: "Texts and emails that cut no-shows.", icon: "M6 16V11a6 6 0 1 1 12 0v5l2 2H4zM10 21h4" }, { label: "Payments", text: "Take deposits when the slot is booked.", icon: "M3 7h18v10H3zM3 11h18M7 15h3" }, { label: "Reports", text: "Busy hours, repeat clients, takings.", icon: "M5 20V10M12 20V4M19 20v-7" }, { label: "Integrations", text: "Sync with the calendar you already use.", icon: "M9 7h6v4H9zM12 11v4M6 15h12v5H6z" }, ], }, { label: "Pricing", href: "#" }, { label: "Customers", href: "#" }, { label: "Resources", href: "#", menu: [ { label: "Help centre", text: "Guides for every setting.", icon: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM9.5 9a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .9-1 1.7M12 17h.01" }, { label: "Changelog", text: "What shipped this month.", icon: "M5 4h14v16H5zM9 9h6M9 13h6" }, { label: "Templates", text: "Ready booking pages by trade.", icon: "M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z" }, ], }, { label: "Docs", href: "#" }, ]; const variants = { light: { name: "Light", bar: "bg-white/95 text-slate-900 border-slate-200", link: "text-slate-600 hover:text-slate-900 hover:bg-slate-100", on: "text-slate-900", dot: "bg-emerald-600", cta: "bg-slate-900 text-white hover:bg-slate-700", ghost: "text-slate-700 hover:bg-slate-100", page: "bg-slate-50", ring: "focus-visible:ring-emerald-600 focus-visible:ring-offset-white" }, dark: { name: "Dark", bar: "bg-[#0d1412]/95 text-white border-white/10", link: "text-slate-300 hover:text-white hover:bg-white/10", on: "text-white", dot: "bg-emerald-400", cta: "bg-emerald-400 text-[#0d1412] hover:bg-emerald-300", ghost: "text-slate-200 hover:bg-white/10", page: "bg-[#0a0f0e]", ring: "focus-visible:ring-emerald-400 focus-visible:ring-offset-[#0d1412]" }, pill: { name: "Floating", bar: "bg-white/95 text-slate-900 border-slate-200", link: "text-slate-600 hover:text-slate-900 hover:bg-slate-100", on: "text-slate-900", dot: "bg-orange-500", cta: "bg-orange-600 text-white hover:bg-orange-700", ghost: "text-slate-700 hover:bg-slate-100", page: "bg-[#f4efe8]", ring: "focus-visible:ring-orange-600 focus-visible:ring-offset-white" }, } as const; type VariantKey = keyof typeof variants; /* ---------- Small hooks ---------- */ /** True once the scroll box (or the window when no ref is given) has moved past `offset`. */ function useScrolled(box?: RefObject, offset = 12) { const [scrolled, setScrolled] = useState(false); useEffect(() => { const el: HTMLElement | Window = box?.current ?? window; const read = () => setScrolled((box?.current ? box.current.scrollTop : window.scrollY) > offset); read(); el.addEventListener("scroll", read, { passive: true }); return () => el.removeEventListener("scroll", read); }, [box, offset]); return scrolled; } /** Width of the navbar's own box, so it is responsive inside any container. */ function useCompact(ref: RefObject) { const [compact, setCompact] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; const ro = new ResizeObserver(([e]) => setCompact(e.contentRect.width < COMPACT_BELOW)); ro.observe(el); return () => ro.disconnect(); }, [ref]); return compact; } function Icon({ d, className = "h-5 w-5" }: { d: string; className?: string }) { return ( ); } function Logo({ dot }: { dot: string }) { return ( {brand} ); } /* ---------- The animated hamburger: three bars that fold into an X ---------- */ function Burger({ open, reduce }: { open: boolean; reduce: boolean }) { const t = reduce ? { duration: 0 } : { type: "spring", stiffness: 420, damping: 30 }; return ( ); } /* ---------- The navbar itself ---------- */ type NavbarProps = { variant: VariantKey; scrollBox?: RefObject; startOpen?: string | null; startMobileOpen?: boolean; forceScrolled?: boolean }; export function Navbar({ variant, scrollBox, startOpen = null, startMobileOpen = false, forceScrolled }: NavbarProps) { const v = variants[variant]; const reduce = !!useReducedMotion(); const root = useRef(null); const compact = useCompact(root); const scrolledLive = useScrolled(scrollBox); const scrolled = forceScrolled ?? scrolledLive; const [open, setOpen] = useState(startOpen); const [mobile, setMobile] = useState(startMobileOpen); const [section, setSection] = useState("Product"); const uid = useId(); const burgerRef = useRef(null); const triggers = useRef>({}); const ring = `focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 ${v.ring}`; const spring = reduce ? { duration: 0 } : { type: "spring", stiffness: 380, damping: 32 }; useEffect(() => setOpen(startOpen), [startOpen]); // Close an open menu once the page has really scrolled (not on the tiny scroll a focus jump can cause). useEffect(() => { const box = scrollBox?.current; const top = () => (box ? box.scrollTop : window.scrollY); let start = top(); const onScroll = () => { if (Math.abs(top() - start) > 48) { setOpen(null); start = top(); } }; const target: HTMLElement | Window = box ?? window; target.addEventListener("scroll", onScroll, { passive: true }); return () => target.removeEventListener("scroll", onScroll); }, [scrollBox, open]); useEffect(() => { const away = (e: PointerEvent) => { if (root.current && !root.current.contains(e.target as Node)) setOpen(null); }; document.addEventListener("pointerdown", away); return () => document.removeEventListener("pointerdown", away); }, []); const onKey = (e: KeyboardEvent) => { if (e.key !== "Escape") return; if (open) { triggers.current[open]?.focus(); setOpen(null); } if (mobile) { setMobile(false); burgerRef.current?.focus(); } }; const openWithArrow = (e: KeyboardEvent, label: string) => { if (e.key !== "ArrowDown") return; e.preventDefault(); setOpen(label); requestAnimationFrame(() => document.getElementById(`${uid}-${label}`)?.querySelector("a")?.focus()); }; const pill = variant === "pill"; const shell = pill ? `mx-auto mt-3 w-[calc(100%-1.5rem)] border ${mobile ? "rounded-3xl" : "rounded-full"} shadow-[0_8px_30px_-12px_rgba(15,23,42,0.25)] ${scrolled ? "max-w-4xl" : "max-w-5xl"}` : `w-full border-b ${scrolled ? "shadow-[0_6px_24px_-14px_rgba(0,0,0,0.35)]" : "border-transparent"}`; return (

{!compact && (

{l.label} {current &&
{isOpen && ( {l.mega ? : } )}

)}

{!compact && Sign in} Start free {compact && ( )}

{compact && mobile && (

{panel ? ( <> {expanded && ( {panel.slice(0, 4).map((it) => (

{it.label}

))} )} ) : ( {l.label} {l.label === ACTIVE && )}

)}

); } function Mega({ items, dark, ring, dot }: { items: Item[]; dark: boolean; ring: string; dot: string }) { return (

{it.label} {it.text}

); } function List({ items, dark, ring }: { items: Item[]; dark: boolean; ring: string }) { return (

{it.label} {it.text}

); } /* ---------- Preview: desktop page on the left, phone with the menu open on the right ---------- */ function FakePage({ dark }: { dark: boolean }) { const line = dark ? "bg-white/10" : "bg-slate-200"; return (

Pricing

One price per chair, every feature included.

{[["Solo", "$19"], ["Studio", "$15"], ["Salon", "$12"]].map(([plan, price]) => (

{plan}

{price} / chair / month

))}

Hairdresser styling a client's hair in a bright salon

); } function Frame({ label, children, className = "" }: { label: string; children: ReactNode; className?: string }) { return (

{label}

{children} ); } export default function ResponsiveReactNavbar() { const [variant, setVariant] = useState("light"); const [demoOpen, setDemoOpen] = useState("Product"); const desk = useRef(null); const reduce = useReducedMotion(); const [touched, setTouched] = useState(false); // any click or key press ends the self-playing demo const dark = variant === "dark"; // Idle demo: show the mega menu, then scroll the page so the bar shrinks. Stops on any input. useEffect(() => { const box = desk.current; if (reduce || touched) return; const t = window.setTimeout(() => { setDemoOpen(null); box?.scrollTo({ top: 160, behavior: "smooth" }); }, 2200); return () => window.clearTimeout(t); }, [reduce, touched]); return (

setTouched(true)} onKeyDownCapture={() => setTouched(true)} className="min-h-[640px] bg-[#eef0ec] px-4 py-8 font-['Inter_Tight','Inter',ui-sans-serif,system-ui] sm:px-8">

{(Object.keys(variants) as VariantKey[]).map((k) => ( ))}

); } 60:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"framer-motion"}]]}]}]]}],["$","$L61",null,{"namespace":"@weinc","registryDependencies":[]}]]}],null]}],["$","$L62",null,{"files":[{"path":"components/we-inc/responsive-react-navbar-with-mega-menu-animated-hamburger-and-sticky-shrink-on-scroll.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]