"use client"; import Link from "next/link"; import Image from "next/image"; import { images } from "@/branding/images"; import { usePathname, useRouter } from "next/navigation"; import { useEffect, useState } from "react"; import { useTranslation } from "@/hooks/useTranslation"; import { LocaleSwitcher } from "@/components/ui/LocaleSwitcher"; import { getStoredUser } from "@/lib/utils/persistAuth"; import { useAppDispatch, useAppSelector } from "@/store/hooks"; import { fetchNavCategories } from "@/store/slices/navCategorySlice"; import { fetchProfile } from "@/store/slices/profileSlice"; import { slugify } from "@/lib/utils/slugify"; import type { AuthUser } from "@/types/api/auth.types"; interface HeaderProps { locale: string; activePage?: string; } export function Header({ locale }: HeaderProps) { const { t } = useTranslation("common"); const router = useRouter(); const pathname = usePathname(); const dispatch = useAppDispatch(); const { items: categories, isLoaded } = useAppSelector( (s) => s.navCategories, ); const profileUser = useAppSelector((s) => s.profile.user); const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [authUser, setAuthUser] = useState(null); useEffect(() => { setAuthUser(getStoredUser()); }, []); useEffect(() => { if (!isLoaded) dispatch(fetchNavCategories()); }, [isLoaded, dispatch]); // Fetch fresh profile (for up-to-date avatar) once auth user is known useEffect(() => { if (authUser && !profileUser) dispatch(fetchProfile()); }, [authUser, profileUser, dispatch]); const href = (path: string) => path; function isActive(segment: string): boolean { if (segment === "home") { return pathname === "/" || pathname === "/home"; } return pathname.includes(segment); } const a = (segment: string) => `nav-link${isActive(segment) ? " active" : ""}`; const aa = (segment: string) => `nav-link nav-link-app${isActive(segment) ? " active" : ""}`; const ma = (segment: string) => `mob-nav-link${isActive(segment) ? " active" : ""}`; function goSearch() { router.push(href("/search")); setMobileMenuOpen(false); } function closeMobileMenu() { setMobileMenuOpen(false); } useEffect(() => { function onKey(e: KeyboardEvent) { if ((e.metaKey || e.ctrlKey) && e.key === "k") { e.preventDefault(); router.push(href("/search")); } if (e.key === "Escape") { setMobileMenuOpen(false); } } window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [router]); useEffect(() => { if (mobileMenuOpen) { document.body.style.overflow = "hidden"; } else { document.body.style.overflow = ""; } return () => { document.body.style.overflow = ""; }; }, [mobileMenuOpen]); return ( <> {mobileMenuOpen && (
)} ); }