// Client/Server Component "use client" // required for: useState (dropdown/mobile menu state) /** * @name Navbar 04 * @description A navigation bar with dropdown mega menu panels for products * and resources. Features hover-activated dropdowns on desktop and collapsible * mobile menu. * * @slots navbar, navbar-container, navbar-brand, navbar-brand-link, navbar-brand-text, * navbar-nav, navbar-nav-item, navbar-dropdown-trigger, navbar-dropdown, * navbar-dropdown-section, navbar-dropdown-title, navbar-dropdown-link, * navbar-actions, navbar-mobile-toggle, navbar-mobile-menu * @variant mega-menu * * @registryDependencies button * @dependencies lucide-react */ import * as React from "react" import { Menu, X, ChevronDown, Rocket, BarChart3, Users, BookOpen, Lightbulb, Headset, } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Button } from "@/registry/ui/button" // ============================================================================ // TYPES // ============================================================================ interface DropdownLink { /** Unique identifier for list key */ id: string /** Link label text */ label: string /** Link destination */ href: string /** Optional description text */ description?: string /** Optional icon element */ icon?: React.ReactNode } interface DropdownSection { /** Unique identifier for list key */ id: string /** Section title */ title: string /** Links in this section */ links: DropdownLink[] } interface Navbar04Props { /** Brand/company name */ brandName?: string /** Product dropdown sections */ productSections?: DropdownSection[] /** Resource dropdown sections */ resourceSections?: DropdownSection[] /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_PRODUCT_SECTIONS: DropdownSection[] = [ { id: "features-section", title: "Features", links: [ { id: "analytics-link", label: "Analytics", href: "#", description: "Track performance metrics", icon: , }, { id: "automation-link", label: "Automation", href: "#", description: "Streamline your workflow", icon: , }, { id: "team-link", label: "Team Management", href: "#", description: "Collaborate effectively", icon: , }, ], }, ] const DEFAULT_RESOURCE_SECTIONS: DropdownSection[] = [ { id: "learn-section", title: "Learn", links: [ { id: "docs-link", label: "Documentation", href: "#", description: "Get started guide", icon: , }, { id: "blog-link", label: "Blog", href: "#", description: "Tips and insights", icon: , }, { id: "support-link", label: "Support", href: "#", description: "Help center", icon: , }, ], }, ] // ============================================================================ // COMPONENT // ============================================================================ function Navbar04({ brandName = "Acme", productSections = DEFAULT_PRODUCT_SECTIONS, resourceSections = DEFAULT_RESOURCE_SECTIONS, className, idBase, }: Navbar04Props) { const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false) const [activeDropdown, setActiveDropdown] = React.useState(null) const id = idBase ?? "navbar-04" return (

{/* Brand */}

{brandName}

{/* Desktop Navigation */}

{/* Products Dropdown */}

setActiveDropdown("products")} onMouseLeave={() => setActiveDropdown(null)} >

{/* Resources Dropdown */}

setActiveDropdown("resources")} onMouseLeave={() => setActiveDropdown(null)} >

Pricing Contact

{/* Desktop Actions */}

{/* Mobile Menu Toggle */}

{/* Mobile Menu */}

) } export default Navbar04 export { Navbar04, type Navbar04Props, type DropdownSection, type DropdownLink, }