"use client" import * as React from "react" import { Menu, Search } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" export interface TopbarProps { /** Primary content slot — typically a breadcrumb or page title. */ children?: React.ReactNode /** Actions rendered on the right — e.g. notifications bell, user dropdown. */ actions?: React.ReactNode /** Callback fired when the mobile menu button is tapped. */ onMenuClick?: () => void /** Callback fired when the search trigger is clicked. */ onSearchClick?: () => void className?: string } /** * Top navigation bar for dashboard pages with a mobile menu toggle, * breadcrumb slot, optional search trigger, and trailing action items. * * @example * ```tsx * setSidebarOpen(true)} * onSearchClick={() => setCommandMenuOpen(true)} * actions={} * > *

Dashboard

* * ``` */ export function Topbar({ children, actions, onMenuClick, onSearchClick, className, }: TopbarProps) { return (

{/* Mobile sidebar toggle — hidden on large screens where sidebar is always visible */} {onMenuClick && ( )} {/* Main content slot */}

{children}

{/* Right-side actions */}

{onSearchClick && ( )} {onSearchClick && ( )} {actions}

) }

Prop	Type	Required	Description
`children`	`ReactNode`	—	Primary content — breadcrumb or page title.
`actions`	`ReactNode`	—	Right-side action items.
`onMenuClick`	`() => void`	—	Mobile sidebar toggle handler.
`onSearchClick`	`() => void`	—	Search trigger handler.