import { Search, PanelLeftClose, PanelLeftOpen, BookOpen } from "lucide-react"; import { Breadcrumbs } from "@/shared/components/breadcrumbs"; import { useLayout } from "@/shared/contexts/layout-context"; import { MobileNav } from "./mobile-nav"; import { NotificationCenter } from "./notification-center"; import { UserMenu } from "./user-menu"; import { ThemeSwitcher } from "./theme-switcher"; import { QuickActions } from "./quick-actions"; import { docsUrl } from "@/lib/docs/links"; import { SHOW_RESOURCE_LINKS } from "@/lib/docs/visibility"; import { useEffect, useRef, type ReactNode } from "react"; type Props = { title: ReactNode; subtitle?: string; actions?: ReactNode; showBreadcrumbs?: boolean; showPageHeader?: boolean; showSidebarToggle?: boolean; }; /** * Sticky application header. Composes: mobile nav trigger, breadcrumbs + * title, global search (⌘K), quick actions, notifications, theme switcher, * and user menu. Backwards-compatible with { title, subtitle, actions }. */ export function AppTopbar({ title, subtitle, actions, showBreadcrumbs = true, showPageHeader = true, showSidebarToggle = true, }: Props) { const { setCommandOpen, sidebarCollapsed, toggleSidebar, navMode, setTopbarActionsNode } = useLayout(); const headerRef = useRef(null); // Publish the actual sticky topbar height (h-header row + title/actions row) // as `--topbar-height` on . Sticky sub-headers below the topbar use // `top-[var(--topbar-height,var(--header-height))]` so they always align flush under the // topbar regardless of breakpoint or wrap. useEffect(() => { const el = headerRef.current; if (!el) return; const write = () => { document.documentElement.style.setProperty( "--topbar-height", `${Math.round(el.getBoundingClientRect().height)}px`, ); }; write(); const ro = new ResizeObserver(write); ro.observe(el); window.addEventListener("resize", write); return () => { ro.disconnect(); window.removeEventListener("resize", write); }; }, []); return (

{/* Row 1 — controls */}

{navMode === "full" && showSidebarToggle && ( )} {/* Mobile-only search icon */}

{SHOW_RESOURCE_LINKS && Docs }

{/* Row 2 — page title + breadcrumbs + actions, 8/4 grid on large screens */} {showPageHeader && (

{showBreadcrumbs && }

{title}

{subtitle && (

{subtitle}

)}

{subtitle && (

{subtitle}

)}

{actions}

)}

); }