import React, { useEffect, useRef, useState } from 'react'; import { SlMenu } from "react-icons/sl"; import useRenderTracker from '../../hooks/useRenderTracker'; import { useSetIsMobileSidebarOpen } from '../../contexts/UIContext'; import { useAuth } from '../../contexts/AuthContext'; import { useSetIsSettingsModalOpen } from '../../contexts/UIContext'; import ProfileLogo from '../Logos/ProfileLogo'; import SeoConsentBanner from '../SeoConsent/SeoConsentBanner'; import { IS_WORDPRESS } from '../../constants'; const MobileHeader: React.FC = () => { const setIsMobileSidebarOpen = useSetIsMobileSidebarOpen(); const setIsSettingsModalOpen = useSetIsSettingsModalOpen(); const { isLoggedIn, userInfo, hasDismissedBanner } = useAuth(); const [isKbOpen, setIsKbOpen] = useState(false); const kbRef = useRef(null); // Calculate whether banner is showing const showBanner = !hasDismissedBanner && !IS_WORDPRESS; useRenderTracker('MobileHeader', { isLoggedIn, userInfo, setIsSettingsModalOpen, setIsMobileSidebarOpen, showBanner }); // Close KB dropdown on outside click useEffect(() => { function handleClickOutside(event: MouseEvent) { if (kbRef.current && !kbRef.current.contains(event.target as Node)) { setIsKbOpen(false); } } function handleEsc(event: KeyboardEvent) { if (event.key === 'Escape') setIsKbOpen(false); } document.addEventListener('mousedown', handleClickOutside); document.addEventListener('keydown', handleEsc); return () => { document.removeEventListener('mousedown', handleClickOutside); document.removeEventListener('keydown', handleEsc); }; }, []); return ( <> {/* Main header with menu and profile */} {/* Banner below the header if showing */} {showBanner && (
)} ); }; export default React.memo(MobileHeader);