import React, { useState, useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { useNavigate } from 'react-router-dom'; import { logoutUser } from '../../store/reducers/authSlice'; import './Header.css'; // Import the CSS file const Header = ({ onMenuToggle, isMenuOpen: propIsMenuOpen, isMobile = false }) => { const dispatch = useDispatch(); const navigate = useNavigate(); const { user } = useSelector(state => state.auth); // Removed local isMenuOpen state const isMenuOpen = propIsMenuOpen; // Use prop directly // pendingNavigation state removed // Removed useEffect to sync with parent menu state (not needed if fully controlled) const [isLoading, setIsLoading] = useState(false); const handleLogout = async () => { setIsLoading(true); try { await dispatch(logoutUser()).unwrap(); navigate('/login'); } catch (error) { console.error('Logout failed:', error); } finally { setIsLoading(false); } }; const toggleMenu = () => { // Only notify parent to toggle its state if (onMenuToggle) { onMenuToggle(!isMenuOpen); } }; // Removed the useEffect for pendingNavigation // Close menu when clicking outside - needs to notify parent useEffect(() => { const handleClickOutside = (event) => { if (isMenuOpen && event.target.closest('.header-menu') === null) { // Notify parent to close menu if (onMenuToggle) { onMenuToggle(false); } } }; document.addEventListener('mousedown', handleClickOutside); return () => { document.removeEventListener('mousedown', handleClickOutside); }; }, [isMenuOpen, onMenuToggle]); // Depend on isMenuOpen prop // Handle keyboard navigation for mobile menu - needs to notify parent useEffect(() => { const handleGlobalKeyDown = (e) => { // Close mobile menu with Escape if (e.key === 'Escape' && isMenuOpen) { // Notify parent to close menu if (onMenuToggle) { onMenuToggle(false); } } }; document.addEventListener('keydown', handleGlobalKeyDown); return () => document.removeEventListener('keydown', handleGlobalKeyDown); }, [isMenuOpen, onMenuToggle]); // Depend on isMenuOpen prop const handleNavigation = (path) => { console.log("Attempting to navigate to:", path); // Add log navigate(path); console.log("Navigation called, now closing menu"); // Add log // Notify parent to close menu if (onMenuToggle) { onMenuToggle(false); } }; return (
{/* Desktop layout - flex for better control */}
{/* Logo and App Title - Aligned to the left */}
L

Lin

{/* Desktop Navigation - Empty for now */}
{/* Navigation items can go here if needed */}
{/* User Profile and Logout - Aligned to the far right */} {user && (
{user.email ? user.email.charAt(0).toUpperCase() : 'U'}

Welcome back

{user.email || 'user@example.com'}

)}
{/* Mobile layout - grid for better control */}
{/* Logo and App Title - Aligned to the left */}
L

Lin

{/* Mobile menu button or user info - Aligned to the right */}
{user ? (
{user.email ? user.email.charAt(0).toUpperCase() : 'U'}
) : ( // Hamburger menu for mobile when not logged in )}
{/* End of mobile grid layout */} {/* Mobile menu */} {user && isMenuOpen && (
{/* Mobile menu header */}
{user.email ? user.email.charAt(0).toUpperCase() : 'U'}

{user.name || 'User'}

{user.email || 'user@example.com'}

{/* Mobile menu body - flex-1 to take available space */}
{/* Mobile menu footer */}
)}
); }; export default Header;