"use client"; import { useState, useEffect, useRef } from "react"; import Link from "next/link"; import { usePathname, useSearchParams } from "next/navigation"; import type { NavTranslations } from "@/types/translations"; import { ThemeToggle } from "./ThemeToggle"; const SiGithubIcon = ({ size = 20 }: { size?: number }) => ( ); const SiLinkedinIcon = ({ size = 20 }: { size?: number }) => ( ); // Inline SVG icons to avoid loading the full lucide-react chunk (~116KB) const MenuIcon = ({ size = 24 }: { size?: number }) => ( ); const XIcon = ({ size = 24 }: { size?: number }) => ( ); const MailIcon = ({ size = 20 }: { size?: number }) => ( ); interface HeaderClientProps { locale: string; translations: NavTranslations; } export default function HeaderClient({ locale, translations }: HeaderClientProps) { const [isOpen, setIsOpen] = useState(false); const [scrolled, setScrolled] = useState(false); const pathname = usePathname(); const searchParams = useSearchParams(); const prevLocale = useRef(locale); useEffect(() => { if (prevLocale.current !== locale) { window.scrollTo({ top: 0, behavior: "instant" }); prevLocale.current = locale; } }, [locale]); const isHome = pathname === `/${locale}` || pathname === `/${locale}/`; useEffect(() => { const handleScroll = () => { setScrolled(window.scrollY > 50); }; window.addEventListener("scroll", handleScroll, { passive: true }); return () => window.removeEventListener("scroll", handleScroll); }, []); useEffect(() => { if (!isOpen) return; const onKeyDown = (e: KeyboardEvent) => { if (e.key === "Escape") setIsOpen(false); }; window.addEventListener("keydown", onKeyDown); return () => window.removeEventListener("keydown", onKeyDown); }, [isOpen]); const navItems = [ { name: translations.home, href: `/${locale}` }, { name: translations.about, href: isHome ? "#about" : `/${locale}#about` }, { name: translations.projects, href: isHome ? "#projects" : `/${locale}/projects` }, { name: translations.contact, href: isHome ? "#contact" : `/${locale}#contact` }, ]; const socialLinks = [ { icon: SiGithubIcon, href: "https://github.com/Denshooter", label: "GitHub" }, { icon: SiLinkedinIcon, href: "https://linkedin.com/in/dkonkol", label: "LinkedIn", }, { icon: MailIcon, href: "mailto:contact@dk0.dev", label: "Email" }, ]; const pathWithoutLocale = pathname.replace(new RegExp(`^/${locale}`), "") || ""; const qs = searchParams.toString(); const query = qs ? `?${qs}` : ""; const enHref = `/en${pathWithoutLocale}${query}`; const deHref = `/de${pathWithoutLocale}${query}`; return ( <>
dk0
{/* Mobile menu overlay — always mounted so it can fade out, not just vanish */}