import { ReactNode, useState, useRef, useEffect } from 'react'; import { Link, NavLink, useLocation, useNavigate } from 'react-router-dom'; import { useAuth } from '../contexts/AuthContext'; import { GlobalSearch } from './GlobalSearch'; import './Layout.css'; interface LayoutProps { children: ReactNode; } function Layout({ children }: LayoutProps) { const location = useLocation(); const navigate = useNavigate(); const { user, loading, logout } = useAuth(); const [showUserMenu, setShowUserMenu] = useState(false); const menuRef = useRef(null); // Close menu when clicking outside useEffect(() => { function handleClickOutside(event: MouseEvent) { if (menuRef.current && !menuRef.current.contains(event.target as Node)) { setShowUserMenu(false); } } document.addEventListener('mousedown', handleClickOutside); return () => document.removeEventListener('mousedown', handleClickOutside); }, []); async function handleLogout() { try { await logout(); setShowUserMenu(false); navigate('/'); } catch { // Error handled in context } } return (
{/* Three fruit trees representing an orchard */} {/* Left tree - rounded canopy */} {/* Center tree - larger rounded canopy */} {/* Right tree - rounded canopy */} {/* Ground */}
Orchard
{children}
); } export default Layout;