"use client"; import type { ReactNode } from "react"; import * as React from "react"; import { cn } from "@/lib/registry/cn"; export interface StackNavigationItem { id?: string; name: string; path: string; icon: ReactNode; badge?: ReactNode; className?: string; } export interface StackNavigationDivider { type: "divider"; id?: string; className?: string; } export type StackNavigationElement = | StackNavigationItem | StackNavigationDivider; export interface StackNavigationProps { items: StackNavigationElement[]; renderItem?: (item: StackNavigationItem) => ReactNode; renderDivider?: (divider: StackNavigationDivider, index: number) => ReactNode; className?: string; navClassName?: string; width?: string; header?: ReactNode; footer?: ReactNode; orientation?: "vertical" | "horizontal"; /** * For framework-specific routers, user can pass the pathname from their hooks: * - TanStack Router: `useLocation().pathname` * - React Router: `useLocation().pathname` * - Next.js: `usePathname()` */ pathname?: string; onItemClick?: ( item: StackNavigationItem, event: React.MouseEvent, ) => boolean | undefined; } function DefaultNavItem({ item, orientation = "vertical", pathname, onItemClick, }: { item: StackNavigationItem; orientation?: "vertical" | "horizontal"; pathname: string; onItemClick?: ( item: StackNavigationItem, event: React.MouseEvent, ) => boolean | undefined; }) { const isActive = pathname === item.path; const isHorizontal = orientation === "horizontal"; const handleClick = (e: React.MouseEvent) => { if (onItemClick) { const result = onItemClick(item, e); if (result === false) { e.preventDefault(); } } }; return ( e.preventDefault()} > {/* Icon */} {/* Text below icon */} {item.name} {!isHorizontal && item.badge && (

)} ); } function DefaultDivider({ divider, orientation = "vertical", }: { divider: StackNavigationDivider; orientation?: "vertical" | "horizontal"; }) { if (orientation === "horizontal") { return (

); } return (

); } export function StackNavigation({ items, renderItem, renderDivider, className, navClassName, width = "w-[72px]", header, footer, orientation = "vertical", pathname: providedPathname, onItemClick, }: StackNavigationProps) { // Use provided pathname or fall back to window.location.pathname const [clientPathname, setClientPathname] = React.useState(""); React.useEffect(() => { // Only set pathname on client side to avoid hydration mismatch if (typeof window !== "undefined" && !providedPathname) { setClientPathname(window.location.pathname); } }, [providedPathname]); const pathname = providedPathname ?? clientPathname; const isHorizontal = orientation === "horizontal"; const hasShadowNone = className?.includes("shadow-none"); const shadowClass = hasShadowNone ? "" : "shadow-base"; const renderedItems = React.useMemo( () => items.map((item, index) => { if ("type" in item && item.type === "divider") { const dividerKey = item.id ?? item.className ?? "divider"; return renderDivider ? (

{renderDivider(item, index)}

) : ( ); } const navItem = item as StackNavigationItem; const navKey = navItem.id ?? navItem.path ?? navItem.name; return (

{renderItem ? ( renderItem(navItem) ) : ( )}

); }), [items, renderDivider, renderItem, orientation, pathname, onItemClick], ); return ( ); }

Stack Navigation

Showcase

Stack Navigation