472 lines
18 KiB
TypeScript
472 lines
18 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
import { useTranslations } from 'next-intl';
|
|
import { usePathname } from 'next/navigation';
|
|
import { Button } from './ui';
|
|
import { useEffect, useState, useRef } from 'react';
|
|
import { cn } from './ui';
|
|
import { useAnalytics } from './analytics/useAnalytics';
|
|
import { AnalyticsEvents } from './analytics/analytics-events';
|
|
import { Search } from 'lucide-react';
|
|
import { AISearchResults } from './search/AISearchResults';
|
|
|
|
export default function Header() {
|
|
const t = useTranslations('Navigation');
|
|
const pathname = usePathname();
|
|
const { trackEvent } = useAnalytics();
|
|
const [isScrolled, setIsScrolled] = useState(false);
|
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
|
const [isSearchOpen, setIsSearchOpen] = useState(false);
|
|
const mobileMenuRef = useRef<HTMLDivElement>(null);
|
|
|
|
// Extract locale from pathname
|
|
const currentLocale = pathname.split('/')[1] || 'en';
|
|
|
|
// Check if homepage
|
|
const isHomePage = pathname === `/${currentLocale}` || pathname === '/';
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
setIsScrolled(window.scrollY > 50);
|
|
};
|
|
|
|
window.addEventListener('scroll', handleScroll);
|
|
return () => window.removeEventListener('scroll', handleScroll);
|
|
}, []);
|
|
|
|
// Prevent scroll when mobile menu is open and handle focus trap
|
|
useEffect(() => {
|
|
if (isMobileMenuOpen) {
|
|
document.body.style.overflow = 'hidden';
|
|
// Focus trap logic
|
|
const focusableElements = mobileMenuRef.current?.querySelectorAll(
|
|
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
|
|
);
|
|
|
|
if (focusableElements && focusableElements.length > 0) {
|
|
const firstElement = focusableElements[0] as HTMLElement;
|
|
const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;
|
|
|
|
const handleTabKey = (e: KeyboardEvent) => {
|
|
if (e.key === 'Tab') {
|
|
if (e.shiftKey) {
|
|
if (document.activeElement === firstElement) {
|
|
e.preventDefault();
|
|
lastElement.focus();
|
|
}
|
|
} else {
|
|
if (document.activeElement === lastElement) {
|
|
e.preventDefault();
|
|
firstElement.focus();
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleEscapeKey = (e: KeyboardEvent) => {
|
|
if (e.key === 'Escape') {
|
|
setIsMobileMenuOpen(false);
|
|
}
|
|
};
|
|
|
|
document.addEventListener('keydown', handleTabKey);
|
|
document.addEventListener('keydown', handleEscapeKey);
|
|
|
|
// Focus the first element when menu opens
|
|
setTimeout(() => firstElement.focus(), 100);
|
|
|
|
return () => {
|
|
document.removeEventListener('keydown', handleTabKey);
|
|
document.removeEventListener('keydown', handleEscapeKey);
|
|
};
|
|
}
|
|
} else {
|
|
document.body.style.overflow = 'unset';
|
|
}
|
|
}, [isMobileMenuOpen]);
|
|
|
|
// Function to get path for a different locale with segment translation
|
|
const getPathForLocale = (newLocale: string) => {
|
|
const segments = pathname.split('/');
|
|
const originLocale = segments[1] || 'en';
|
|
|
|
// Translation map for localized URL segments
|
|
const segmentMap: Record<string, Record<string, string>> = {
|
|
de: {
|
|
produkte: 'products',
|
|
kontakt: 'contact',
|
|
impressum: 'legal-notice',
|
|
datenschutz: 'privacy-policy',
|
|
agbs: 'terms',
|
|
niederspannungskabel: 'low-voltage-cables',
|
|
mittelspannungskabel: 'medium-voltage-cables',
|
|
hochspannungskabel: 'high-voltage-cables',
|
|
solarkabel: 'solar-cables',
|
|
},
|
|
en: {
|
|
products: 'produkte',
|
|
contact: 'kontakt',
|
|
'legal-notice': 'impressum',
|
|
'privacy-policy': 'datenschutz',
|
|
terms: 'agbs',
|
|
'low-voltage-cables': 'niederspannungskabel',
|
|
'medium-voltage-cables': 'mittelspannungskabel',
|
|
'high-voltage-cables': 'hochspannungskabel',
|
|
'solar-cables': 'solarkabel',
|
|
},
|
|
};
|
|
|
|
// Replace the locale segment
|
|
segments[1] = newLocale;
|
|
|
|
// Translate other segments if they exist in our map
|
|
const translatedSegments = segments.map((segment, index) => {
|
|
if (index <= 1) return segment; // Skip empty and locale segments
|
|
|
|
const mapping = segmentMap[originLocale as keyof typeof segmentMap];
|
|
return mapping && mapping[segment] ? mapping[segment] : segment;
|
|
});
|
|
|
|
return translatedSegments.join('/');
|
|
};
|
|
|
|
const menuItems = [
|
|
{ label: t('home'), href: '/' },
|
|
{ label: t('team'), href: '/team' },
|
|
{ label: t('products'), href: currentLocale === 'de' ? '/produkte' : '/products' },
|
|
{ label: t('blog'), href: '/blog' },
|
|
];
|
|
|
|
const headerClass = cn(
|
|
'fixed top-0 left-0 right-0 z-50 transition-all duration-500 safe-area-p transform-gpu fill-mode-both',
|
|
{
|
|
'bg-primary/95 backdrop-blur-md md:bg-transparent py-3 md:py-8 shadow-2xl md:shadow-none':
|
|
isHomePage && !isScrolled && !isMobileMenuOpen,
|
|
'bg-primary py-3 md:py-4 shadow-2xl': !isHomePage || isScrolled || isMobileMenuOpen,
|
|
},
|
|
);
|
|
|
|
const textColorClass = 'text-white';
|
|
const logoSrc = '/logo-white.svg';
|
|
|
|
return (
|
|
<>
|
|
<header className={headerClass} style={{ animationDuration: '800ms' }}>
|
|
<div className="container mx-auto px-4 md:px-12 lg:px-16 max-w-7xl flex items-center justify-between">
|
|
<div
|
|
className="flex-shrink-0 group touch-target fill-mode-both"
|
|
>
|
|
<Link
|
|
href={`/${currentLocale}`}
|
|
onClick={() =>
|
|
trackEvent(AnalyticsEvents.BUTTON_CLICK, {
|
|
target: 'home_logo',
|
|
location: 'header',
|
|
})
|
|
}
|
|
>
|
|
<Image
|
|
src={logoSrc}
|
|
alt={t('home')}
|
|
width={120}
|
|
height={120}
|
|
style={{ width: 'auto' }}
|
|
className="h-10 md:h-14 w-auto transition-all duration-500 group-hover:scale-110"
|
|
priority
|
|
fetchPriority="high"
|
|
loading="eager"
|
|
decoding="sync"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4 md:gap-12">
|
|
<nav className="hidden lg:flex items-center space-x-10">
|
|
{menuItems.map((item, idx) => (
|
|
<div
|
|
key={item.href}
|
|
className="animate-in fade-in slide-in-from-bottom-4 fill-mode-both"
|
|
style={{ animationDuration: '500ms', animationDelay: `${150 + idx * 80}ms` }}
|
|
>
|
|
{(() => {
|
|
const fullHref = `/${currentLocale}${item.href === '/' ? '' : item.href}`;
|
|
const isActive =
|
|
item.href === '/'
|
|
? pathname === `/${currentLocale}` || pathname === '/'
|
|
: pathname.startsWith(fullHref);
|
|
return (
|
|
<Link
|
|
href={fullHref}
|
|
aria-current={isActive ? 'page' : undefined}
|
|
onClick={() => {
|
|
setIsMobileMenuOpen(false);
|
|
trackEvent(AnalyticsEvents.LINK_CLICK, {
|
|
label: item.label,
|
|
href: item.href,
|
|
location: 'header_nav',
|
|
});
|
|
}}
|
|
className={cn(
|
|
textColorClass,
|
|
'hover:text-accent font-bold transition-all duration-500 text-base md:text-lg tracking-tight relative group inline-block hover:-translate-y-0.5',
|
|
isActive && 'text-accent',
|
|
)}
|
|
>
|
|
{item.label}
|
|
<span
|
|
className={cn(
|
|
'absolute -bottom-2 left-0 h-1 bg-accent transition-all duration-500 rounded-full shadow-[0_0_12px_rgba(130,237,32,0.6)]',
|
|
isActive ? 'w-full' : 'w-0 group-hover:w-full',
|
|
)}
|
|
/>
|
|
</Link>
|
|
);
|
|
})()}
|
|
</div>
|
|
))}
|
|
</nav>
|
|
|
|
<div
|
|
className={cn(
|
|
'hidden lg:flex items-center space-x-8 animate-in fade-in slide-in-from-right-8 fill-mode-both',
|
|
textColorClass,
|
|
)}
|
|
style={{ animationDuration: '600ms', animationDelay: '300ms' }}
|
|
>
|
|
<div
|
|
className="flex items-center space-x-4 text-xs md:text-sm font-extrabold tracking-widest uppercase animate-in fade-in slide-in-from-left-4 fill-mode-both"
|
|
style={{ animationDuration: '500ms', animationDelay: '600ms' }}
|
|
>
|
|
<div>
|
|
<Link
|
|
href={getPathForLocale('en')}
|
|
onClick={() =>
|
|
trackEvent(AnalyticsEvents.TOGGLE_SWITCH, {
|
|
type: 'language',
|
|
from: currentLocale,
|
|
to: 'en',
|
|
location: 'header',
|
|
})
|
|
}
|
|
className={`hover:text-accent transition-colors flex items-center gap-2 touch-target ${currentLocale === 'en' ? 'text-accent' : 'opacity-80'}`}
|
|
>
|
|
EN
|
|
</Link>
|
|
</div>
|
|
<div className="w-px h-4 bg-current opacity-30" />
|
|
<div>
|
|
<Link
|
|
href={getPathForLocale('de')}
|
|
onClick={() =>
|
|
trackEvent(AnalyticsEvents.TOGGLE_SWITCH, {
|
|
type: 'language',
|
|
from: currentLocale,
|
|
to: 'de',
|
|
location: 'header',
|
|
})
|
|
}
|
|
className={`hover:text-accent transition-colors flex items-center gap-2 touch-target ${currentLocale === 'de' ? 'text-accent' : 'opacity-80'}`}
|
|
>
|
|
DE
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className="animate-in fade-in zoom-in-95 fill-mode-both"
|
|
style={{ animationDuration: '600ms', animationDelay: '700ms' }}
|
|
>
|
|
<button
|
|
onClick={() => setIsSearchOpen(true)}
|
|
className="hover:text-accent transition-colors p-2"
|
|
aria-label="Search"
|
|
>
|
|
<Search className="w-5 h-5 md:w-6 md:h-6" />
|
|
</button>
|
|
</div>
|
|
|
|
<div
|
|
className="animate-in fade-in zoom-in-95 fill-mode-both"
|
|
style={{ animationDuration: '600ms', animationDelay: '800ms' }}
|
|
>
|
|
<Button
|
|
href={`/${currentLocale}/${currentLocale === 'de' ? 'kontakt' : 'contact'}`}
|
|
variant="white"
|
|
size="md"
|
|
className="px-8 shadow-xl hover:scale-105 transition-transform"
|
|
onClick={() =>
|
|
trackEvent(AnalyticsEvents.BUTTON_CLICK, {
|
|
label: t('contact'),
|
|
location: 'header_cta',
|
|
})
|
|
}
|
|
>
|
|
{t('contact')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Menu Button */}
|
|
<button
|
|
className={cn(
|
|
'lg:hidden touch-target p-2 rounded-xl bg-white/10 border border-white/20 z-[70] relative transition-all duration-300',
|
|
textColorClass,
|
|
isMobileMenuOpen ? 'rotate-90 scale-110' : 'rotate-0 scale-100',
|
|
)}
|
|
aria-label={t('toggleMenu')}
|
|
aria-expanded={isMobileMenuOpen}
|
|
aria-controls="mobile-menu"
|
|
onClick={() => {
|
|
const newState = !isMobileMenuOpen;
|
|
setIsMobileMenuOpen(newState);
|
|
trackEvent(AnalyticsEvents.BUTTON_CLICK, {
|
|
type: 'mobile_menu',
|
|
action: newState ? 'open' : 'close',
|
|
});
|
|
}}
|
|
>
|
|
<svg
|
|
className="w-7 h-7 transition-transform duration-300"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
{isMobileMenuOpen ? (
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M6 18L18 6M6 6l12 12"
|
|
/>
|
|
) : (
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M4 6h16M4 12h16M4 18h16"
|
|
/>
|
|
)}
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Menu Overlay */}
|
|
<div
|
|
className={cn(
|
|
'fixed inset-0 bg-primary z-[60] lg:hidden transition-all duration-500 ease-in-out flex flex-col',
|
|
isMobileMenuOpen
|
|
? 'opacity-100 translate-y-0'
|
|
: 'opacity-0 -translate-y-full pointer-events-none',
|
|
)}
|
|
id="mobile-menu"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label={t('menu')}
|
|
ref={mobileMenuRef}
|
|
inert={isMobileMenuOpen ? undefined : true}
|
|
>
|
|
<nav className="flex-grow flex flex-col justify-center items-center p-8 space-y-8">
|
|
{menuItems.map((item, idx) => (
|
|
<div
|
|
key={item.href}
|
|
className={cn(
|
|
'transition-all duration-500 transform',
|
|
isMobileMenuOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8',
|
|
)}
|
|
style={{ transitionDelay: `${isMobileMenuOpen ? 200 + idx * 80 : 0}ms` }}
|
|
>
|
|
<Link
|
|
href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
|
|
aria-current={
|
|
(
|
|
item.href === '/'
|
|
? pathname === `/${currentLocale}` || pathname === '/'
|
|
: pathname.startsWith(`/${currentLocale}${item.href}`)
|
|
)
|
|
? 'page'
|
|
: undefined
|
|
}
|
|
onClick={() => {
|
|
setIsMobileMenuOpen(false);
|
|
trackEvent(AnalyticsEvents.LINK_CLICK, {
|
|
label: item.label,
|
|
href: item.href,
|
|
location: 'mobile_menu',
|
|
});
|
|
}}
|
|
className={cn(
|
|
'text-2xl md:text-3xl font-extrabold text-white hover:text-accent transition-all transform block py-4',
|
|
(item.href === '/'
|
|
? pathname === `/${currentLocale}` || pathname === '/'
|
|
: pathname.startsWith(`/${currentLocale}${item.href}`)) && 'text-accent',
|
|
)}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
</div>
|
|
))}
|
|
|
|
<div
|
|
className={cn(
|
|
'pt-8 border-t border-white/10 w-full flex flex-col items-center space-y-8 transition-all duration-500',
|
|
isMobileMenuOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8',
|
|
)}
|
|
style={{ transitionDelay: isMobileMenuOpen ? '600ms' : '0ms' }}
|
|
>
|
|
<div className="flex items-center space-x-8 text-lg md:text-xl font-extrabold tracking-widest uppercase text-white">
|
|
<div>
|
|
<Link
|
|
href={getPathForLocale('en')}
|
|
className={`hover:text-accent transition-colors ${currentLocale === 'en' ? 'text-accent' : 'opacity-80'}`}
|
|
>
|
|
EN
|
|
</Link>
|
|
</div>
|
|
<div className="w-px h-6 bg-white/30" />
|
|
<div>
|
|
<Link
|
|
href={getPathForLocale('de')}
|
|
className={`hover:text-accent transition-colors ${currentLocale === 'de' ? 'text-accent' : 'opacity-80'}`}
|
|
>
|
|
DE
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-full max-w-xs">
|
|
<Button
|
|
href={`/${currentLocale}/${currentLocale === 'de' ? 'kontakt' : 'contact'}`}
|
|
variant="accent"
|
|
size="lg"
|
|
className="w-full py-6 text-lg md:text-xl shadow-2xl hover:scale-105 transition-transform"
|
|
>
|
|
{t('contact')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom Branding */}
|
|
<div
|
|
className={cn(
|
|
'p-12 flex justify-center transition-all duration-700',
|
|
isMobileMenuOpen ? 'opacity-20 scale-100' : 'opacity-0 scale-75',
|
|
)}
|
|
style={{ transitionDelay: isMobileMenuOpen ? '800ms' : '0ms' }}
|
|
>
|
|
<Image src="/logo-white.svg" alt={t('home')} width={80} height={80} unoptimized />
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<AISearchResults
|
|
isOpen={isSearchOpen}
|
|
onClose={() => setIsSearchOpen(false)}
|
|
/>
|
|
</>
|
|
);
|
|
}
|