import { useState, useRef, useEffect } from 'react' import { useLocation } from 'react-router-dom' import { Search, Bell, ChevronDown, User, Palette, LogOut, Shield, HelpCircle } from 'lucide-react' const pageTitles: Record = { '/': 'Glance', '/infrastructure': 'Infrastructure', '/booknest': 'BookNest', '/terminal': 'Terminal', '/settings': 'Settings', } const pageSubtitles: Record = { '/booknest': 'Your Digital Library', } export default function TopBar() { const [userMenuOpen, setUserMenuOpen] = useState(false) const menuRef = useRef(null) const location = useLocation() const title = pageTitles[location.pathname] ?? 'Glance' const subtitle = pageSubtitles[location.pathname] 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 */}

{title}

{subtitle && (

{subtitle}

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