// Client/Server Component "use client" // required for: useState, useEffect, useRef (menu states, click outside) /** * @name Navbar 06 * @description Dashboard/SaaS application navbar with user avatar, notifications, * and workspace context. Optimized for logged-in experiences with user dropdown menu. * * @slots navbar, navbar-container, navbar-brand, navbar-brand-link, navbar-brand-logo, * navbar-brand-text, navbar-workspace, navbar-nav, navbar-nav-link, * navbar-actions, navbar-notification-btn, navbar-notification-badge, * navbar-user-menu, navbar-user-avatar, navbar-user-info, navbar-user-name, * navbar-mobile-toggle, navbar-mobile-menu * @variant dashboard * * @registryDependencies button badge * @dependencies lucide-react */ import * as React from "react" import { Menu, X, Bell, Settings, ChevronDown, LogOut, User, Home, BarChart3, Folder, Users, } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" import { Button } from "@/registry/ui/button" // ============================================================================ // TYPES // ============================================================================ interface NavLink { /** Unique identifier for list key */ id: string /** Link text */ label: string /** Link destination */ href: string /** Icon element */ icon?: React.ReactNode /** Active state */ active?: boolean } interface UserInfo { /** User display name */ name: string /** User email */ email: string /** Avatar URL */ avatar?: string } interface Navbar06Props { /** Brand/logo text */ brandName?: string /** Brand logo URL */ brandLogo?: string /** Current workspace name */ workspaceName?: string /** Navigation links */ links?: NavLink[] /** User information */ user?: UserInfo /** Notification count */ notificationCount?: number /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_LINKS: NavLink[] = [ { id: "dashboard", label: "Dashboard", href: "#", icon: , active: true, }, { id: "analytics", label: "Analytics", href: "#", icon: , }, { id: "projects", label: "Projects", href: "#", icon: , }, { id: "team", label: "Team", href: "#", icon: , }, ] const DEFAULT_USER: UserInfo = { name: "John Doe", email: "john@example.com", } // ============================================================================ // COMPONENT // ============================================================================ function Navbar06({ brandName = "AppName", brandLogo, workspaceName = "Workspace", links = DEFAULT_LINKS, user = DEFAULT_USER, notificationCount = 3, className, idBase, }: Navbar06Props) { const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false) const [userMenuOpen, setUserMenuOpen] = React.useState(false) const userMenuRef = React.useRef(null) const id = idBase ?? "navbar-06" // Close user menu on outside click React.useEffect(() => { function handleClickOutside(event: MouseEvent) { if ( userMenuRef.current && !userMenuRef.current.contains(event.target as Node) ) { setUserMenuOpen(false) } } document.addEventListener("mousedown", handleClickOutside) return () => document.removeEventListener("mousedown", handleClickOutside) }, []) const initials = user.name .split(" ") .map((n) => n[0]) .join("") .toUpperCase() .slice(0, 2) return (

{/* Left section: Brand + Workspace */}

{/* Mobile toggle */} {/* Brand */}

{brandLogo ? (

) : (

{brandName.charAt(0)}

)} {brandName}

{/* Workspace */}

{/* Center: Navigation */}

{links.map((link) => ( {link.icon} {link.label} ))}

{/* Right: Actions + User */}

{/* Notifications */} {/* Settings */} {/* User Menu */}

{/* Dropdown */}

{/* Mobile Menu */}

) } export default Navbar06 export { Navbar06, type Navbar06Props, type NavLink, type UserInfo }