64: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"] 65:T1c6e,"use client"; import { useEffect, useRef, useState, useSyncExternalStore } from "react"; import type { ReactNode, RefObject } from "react"; export type HideOnScrollNavbarProps = { /** The bar's own content (logo, links, a button). Defaults to a "Brand" wordmark. */ children?: ReactNode; /** * What scrolls. "window" (default) follows the page scroll, which is what a * real site header wants; pass the ref of any overflow-y-auto element to * follow that box instead. */ scroller?: RefObject | "window"; /** "fixed" to the viewport or "absolute" inside the nearest positioned parent. Default: fixed for the window, absolute for a scroller box. */ position?: "fixed" | "absolute"; /** "light" paints a white bar with dark text, "dark" an ink bar with light text. Default "light". */ tone?: "light" | "dark"; /** Transparent at the very top, then frosted glass after the first scroll. false keeps a solid bar all the time. Default true. */ glass?: boolean; /** Reading-progress line along the bottom edge (it stays visible as a hairline while the bar is away). Default false. */ progress?: boolean; /** Colour of the progress line (any CSS colour). Default: the bar's text colour. */ accent?: string; /** The bar never hides above this scroll offset, in px. Default 40. */ hideAfter?: number; /** Scroll movement in px that counts as a change of direction. Absorbs trackpad jitter. Default 4. */ sensitivity?: number; className?: string; }; const REDUCE_QUERY = "(prefers-reduced-motion: reduce)"; const subscribeReduce = (cb: () => void) => { const m = window.matchMedia(REDUCE_QUERY); m.addEventListener("change", cb); return () => m.removeEventListener("change", cb); }; const getReduce = () => window.matchMedia(REDUCE_QUERY).matches; const getReduceServer = () => false; const SPRING_IN = "transform 640ms cubic-bezier(0.3, 1.35, 0.5, 1)"; const EASE_OUT = "transform 300ms cubic-bezier(0.65, 0, 0.35, 1)"; const SURFACE_FADE = "background-color 320ms ease, box-shadow 320ms ease, backdrop-filter 320ms ease, -webkit-backdrop-filter 320ms ease"; const COLOUR = /^[#a-zA-Z0-9(),.%\s/-]{1,48}$/; const TONES = { light: { fg: "#0b0c0f", glass: "rgba(255,255,255,0.72)", solid: "rgba(255,255,255,0.92)", hair: "rgba(11,12,15,0.09)", lift: "0 10px 28px -14px rgba(11,12,15,0.28)", }, dark: { fg: "#f4f5f7", glass: "rgba(10,11,14,0.58)", solid: "rgba(10,11,14,0.9)", hair: "rgba(255,255,255,0.09)", lift: "0 14px 34px -14px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.05)", }, } as const; export function HideOnScrollNavbar({ children, scroller = "window", position, tone = "light", glass = true, progress = false, accent, hideAfter = 40, sensitivity = 4, className = "", }: HideOnScrollNavbarProps) { const rootRef = useRef(null); const lineRef = useRef(null); const [hidden, setHidden] = useState(false); const [scrolled, setScrolled] = useState(false); const reduce = useSyncExternalStore(subscribeReduce, getReduce, getReduceServer); useEffect(() => { const el = scroller === "window" ? null : scroller.current; if (scroller !== "window" && !el) return; const target: HTMLElement | Window = el ?? window; const read = () => { if (el) return { y: el.scrollTop, max: el.scrollHeight - el.clientHeight }; return { y: window.scrollY, max: document.documentElement.scrollHeight - window.innerHeight }; }; let last = read().y; let isHidden = false; let isScrolled = false; let raf = 0; const frame = () => { raf = 0; const { y: raw, max } = read(); // Clamp so rubber-band overscroll never reads as a direction change. const y = Math.min(Math.max(raw, 0), Math.max(max, 0)); if (lineRef.current) lineRef.current.style.transform = "scaleX(" + (max > 0 ? y / max : 0).toFixed(4) + ")"; const sc = y > 8; if (sc !== isScrolled) { isScrolled = sc; setScrolled(sc); } let next = isHidden; if (y <= hideAfter) { next = false; last = y; } else if (Math.abs(y - last) > sensitivity) { next = y > last; last = y; } if (next !== isHidden) { isHidden = next; setHidden(next); } }; const schedule = () => { if (!raf) raf = requestAnimationFrame(frame); }; target.addEventListener("scroll", schedule, { passive: true }); window.addEventListener("resize", schedule); schedule(); return () => { target.removeEventListener("scroll", schedule); window.removeEventListener("resize", schedule); if (raf) cancelAnimationFrame(raf); }; }, [scroller, hideAfter, sensitivity]); // Once it has slid away, take it out of the tab order and the accessibility tree. useEffect(() => { const node = rootRef.current; if (!node) return; if (!hidden) { node.toggleAttribute("inert", false); return; } const t = window.setTimeout(() => node.toggleAttribute("inert", true), reduce ? 0 : 300); return () => window.clearTimeout(t); }, [hidden, reduce]); const t = TONES[tone === "dark" ? "dark" : "light"]; const raised = glass ? scrolled && !hidden : true; const bg = glass ? (scrolled ? t.glass : "transparent") : t.solid; const blur = glass ? (scrolled ? "blur(16px) saturate(1.7)" : "blur(0px)") : "blur(6px)"; const pos = position ?? (scroller === "window" ? "fixed" : "absolute"); const line = accent && COLOUR.test(accent) ? accent : "currentColor"; const peek = progress ? "calc(-100% + 2px)" : "-100%"; return ( ); } 63:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L64",null,{"files":[{"path":"components/viberdy/hide-on-scroll-navbar.tsx","content":"$65","type":"registry:component","target":"components/viberdy/hide-on-scroll-navbar.tsx"}],"className":"h-[70svh] min-h-80"}]]}]