"use client"; import type { ReactNode } from "react"; import { memo, useContext, useState } from "react"; import { Header, HeaderEnd, HeaderInner, HeaderNav, HeaderNavContext, HeaderStart, } from "@/components/registry/primitives/core/header"; import { NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuTrigger, navigationMenuTriggerStyle, } from "@/components/registry/primitives/core/navigation-menu"; import { TypographyLarge } from "@/components/registry/primitives/core/typography"; import { Image } from "@/components/registry/primitives/editables/image"; import { cn } from "@/lib/registry/cn"; export interface NavDropdownItem { id?: string; label: string; href: string; } export interface NavItem { id?: string; label: string; href?: string; isActive?: boolean; children?: NavDropdownItem[]; } export interface LogoConfig { light: string; dark: string; alt?: string; } export interface RightSideItem { id: string; content: ReactNode; } /** Main Topbar component props */ export interface TopbarProps { logo?: LogoConfig; brandName?: string; navigation?: NavItem[]; rightSideItems?: RightSideItem[]; className?: string; } // Desktop nav (shared between header and mobile sheet) const TopbarNavItems = memo(function TopbarNavItems({ navigation, }: { navigation: NavItem[]; }) { const navContext = useContext(HeaderNavContext); const isVertical = navContext?.orientation === "vertical"; if (isVertical) { return ( <> {navigation.map((item) => ( ))} ); } const renderDesktopLink = (item: NavItem) => { const classes = cn(navigationMenuTriggerStyle(), item.isActive && "active"); if (!item.href) { return ( {item.label} ); } return ( {item.label} ); }; return ( <> {navigation.map((item) => ( {item.children && item.children.length > 0 ? ( <> {item.label}

{child.label}

) : ( renderDesktopLink(item) )} ))} ); }); function TopbarTreeItem({ item }: { item: NavItem }) { const [open, setOpen] = useState(false); const hasChildren = (item.children?.length ?? 0) > 0; if (!hasChildren) { return ( {item.href ? ( { event.stopPropagation(); }} > {item.label} ) : ( {item.label} )} ); } return (

{open ? (

{ event.stopPropagation(); }} > {child.label}

) : null}

); } // MAIN COMPONENT function Topbar({ logo, brandName, navigation = [], rightSideItems = [], className, }: TopbarProps) { return (

{logo && ( )} {brandName && ( {brandName} )}

{navigation.length > 0 ? ( ) : null} {rightSideItems.map((item) => (

{item.content}

))}

); } export { Topbar }; export default Topbar;

Top Bar

Showcase

Top Bar