"use client"; import React, { useState, useRef, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Search, Bell, LayoutGrid, Menu, X, User, Settings, LogOut, CreditCard, MessageSquare, CheckCircle2, Command } from "lucide-react"; export default function EnterpriseAppNavbar() { const [activeMenu, setActiveMenu] = useState<"apps" | "notifications" | "profile" | null>(null); const [isMobileOpen, setIsMobileOpen] = useState(false); const menuRef = useRef(null); // Close menus when clicking outside useEffect(() => { function handleClickOutside(event: MouseEvent) { if (menuRef.current && !menuRef.current.contains(event.target as Node)) { setActiveMenu(null); } } document.addEventListener("mousedown", handleClickOutside); return () => document.removeEventListener("mousedown", handleClickOutside); }, []); const toggleMenu = (menu: "apps" | "notifications" | "profile") => { setActiveMenu(activeMenu === menu ? null : menu); }; const navLinks = [ { id: "overview", label: "Overview" }, { id: "analytics", label: "Analytics" }, { id: "customers", label: "Customers" }, { id: "settings", label: "Settings" }, ]; return (

{/* Main Navbar */}

{/* Left: Brand & Main Links */}

{/* Brand */}

Vertex

{/* Desktop Links */}

{/* Center: Global Search (Hidden on small screens) */}

K

{/* Right: Actions & Profile */}

{/* Mobile Search Icon */} {/* Notifications Menu */}

{activeMenu === "notifications" && (

Notifications

{[1, 2, 3].map((_, i) => (

New comment on project

Sarah left a comment on the Q3 Roadmap.

2 hours ago

))}

)}

{/* Profile Menu */}

{activeMenu === "profile" && (

Alexis Quiroz

alexis@vertex.io

)}

{/* Mobile Menu Hamburger */}

{/* --- Mobile Full Width Dropdown --- */} {isMobileOpen && (

{navLinks.map((link) => ( ))} {/* Mobile Search fallback */}

)}

{/* Placeholder content to demonstrate the navbar shadow/overlap */}

Application Content Area

); }