import React, { useState, useEffect, useRef } from 'react'; import { Menu, X, Code2, User, LogIn, UserPlus, LogOut, LayoutDashboard, ShieldAlert } from 'lucide-react'; import { Link, useLocation, useNavigate } from 'react-router-dom'; import { Button } from './Button'; import { useAuth } from '../context/AuthContext'; export const Navbar: React.FC = () => { const [isOpen, setIsOpen] = useState(false); const [isProfileOpen, setIsProfileOpen] = useState(false); const [scrolled, setScrolled] = useState(false); const location = useLocation(); const navigate = useNavigate(); const profileRef = useRef(null); const { user, signOut, isAdmin } = useAuth(); useEffect(() => { const handleScroll = () => { setScrolled(window.scrollY > 20); }; window.addEventListener('scroll', handleScroll); // Close dropdown when clicking outside const handleClickOutside = (event: MouseEvent) => { if (profileRef.current && !profileRef.current.contains(event.target as Node)) { setIsProfileOpen(false); } }; document.addEventListener('mousedown', handleClickOutside); return () => { window.removeEventListener('scroll', handleScroll); document.removeEventListener('mousedown', handleClickOutside); }; }, []); useEffect(() => { setIsOpen(false); setIsProfileOpen(false); }, [location]); const handleLogout = async () => { await signOut(); navigate('/'); setIsProfileOpen(false); }; // Helper to determine if a link is active based on hash or path const isActive = (path: string) => { if (path === '/') return location.pathname === '/' && !location.hash; if (path.startsWith('/#')) return location.hash === path.substring(1); return location.pathname === path; }; const navLinks = [ { name: 'Kezdőlap', path: '/' }, { name: 'Szolgáltatások', path: '/#services' }, { name: 'Referenciák', path: '/#references' }, { name: 'Csomagok', path: '/#products' }, ]; const linkClass = (path: string) => `text-sm font-medium transition-colors hover:text-primary ${ isActive(path) ? 'text-primary' : ( !scrolled && location.pathname === '/' ? 'text-gray-100 hover:text-white' : 'text-gray-700' ) }`; return ( ); };