import { useState, useRef, useEffect } from 'react' import { Search, Bell, ChevronDown, User, Palette, LogOut, Shield, HelpCircle } from 'lucide-react' export default function TopBar() { const [userMenuOpen, setUserMenuOpen] = useState(false) const menuRef = useRef(null) useEffect(() => { function handleClick(e: MouseEvent) { if (menuRef.current && !menuRef.current.contains(e.target as Node)) { setUserMenuOpen(false) } } document.addEventListener('mousedown', handleClick) return () => document.removeEventListener('mousedown', handleClick) }, []) return (
{/* Page Title — pushed away from sidebar edge */}

Glance

{/* Center section — Search bar */}
{/* Right section — Bell + Avatar, moved toward center (away from window edge) */}
{/* Notifications */} {/* User Avatar + Dropdown */}
{userMenuOpen && (

ArchNest Ops

admin@archnest.io

)}
) }