mmintel/klz-cables.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Marc Mintel
2026-01-17 00:06:30 +01:00
parent f18dd5b0f9
commit 3dd4f7f121
78 changed files with 1181 additions and 925 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
components/Header.tsx
View File

@@ -4,14 +4,30 @@ 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 } from 'react';
import { cn } from './ui';
export default function Header() {
const t = useTranslations('Navigation');
const pathname = usePathname();
const [isScrolled, setIsScrolled] = useState(false);
// 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);
}, []);
// Function to get path for a different locale
const getPathForLocale = (newLocale: string) => {
const segments = pathname.split('/');
@@ -24,60 +40,92 @@ export default function Header() {
{ label: t('team'), href: '/team' },
{ label: t('products'), href: '/products' },
{ label: t('blog'), href: '/blog' },
{ label: t('contact'), href: '/contact' },
];
const headerClass = cn(
"fixed top-0 left-0 right-0 z-50 transition-all duration-300",
{
"bg-transparent": isHomePage && !isScrolled,
"bg-white shadow-md": !isHomePage || isScrolled,
"py-4": !isScrolled,
"py-2": isScrolled
}
);
const textColorClass = (isHomePage && !isScrolled) ? "text-white" : "text-text-primary";
const logoSrc = (isHomePage && !isScrolled)
? "/logo-white.svg"
: "/logo-blue.svg";
return (
<header className="bg-white shadow-sm sticky top-0 z-50">
<div className="container mx-auto px-4 h-20 flex items-center justify-between">
<Link href={`/${currentLocale}`} className="flex-shrink-0">
<Image
src="/uploads/2023/11/KLZ-Logo-blau.svg"
alt="KLZ Cables"
width={100}
height={48}
className="h-12 w-auto"
priority
/>
</Link>
<>
<header className={headerClass}>
<div className="container mx-auto px-4 flex items-center justify-between">
<Link href={`/${currentLocale}`} className="flex-shrink-0">
<Image
src={logoSrc}
alt="KLZ Cables"
width={100}
height={100}
className="h-12 w-auto transition-all duration-300"
priority
unoptimized
/>
</Link>
<nav className="hidden md:flex items-center space-x-8">
{menuItems.map((item) => (
<Link
key={item.href}
href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
className="text-text-primary hover:text-primary font-medium transition-colors"
>
{item.label}
</Link>
))}
</nav>
<div className="flex items-center gap-8">
<nav className="hidden lg:flex items-center space-x-8">
{menuItems.map((item) => (
<Link
key={item.href}
href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
className={cn(textColorClass, "hover:text-primary font-medium transition-colors text-lg")}
>
{item.label}
</Link>
))}
</nav>
<div className="flex items-center space-x-4">
<div className="flex items-center space-x-2 text-sm font-medium">
<Link
href={getPathForLocale('en')}
className={`hover:text-primary transition-colors ${currentLocale === 'en' ? 'text-primary font-bold' : 'text-text-secondary'}`}
>
EN
</Link>
<span className="text-text-light">|</span>
<Link
href={getPathForLocale('de')}
className={`hover:text-primary transition-colors ${currentLocale === 'de' ? 'text-primary font-bold' : 'text-text-secondary'}`}
>
DE
</Link>
<div className={cn("hidden lg:flex items-center space-x-4", textColorClass)}>
<div className="flex items-center space-x-2 text-sm font-medium">
<Link
href={getPathForLocale('en')}
className={`hover:text-primary transition-colors flex items-center gap-1 ${currentLocale === 'en' ? 'text-primary font-bold' : 'opacity-80'}`}
>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAMAAABBPP0LAAAAmVBMVEViZsViZMJiYrf9gnL8eWrlYkjgYkjZYkj8/PujwPybvPz4+PetraBEgfo+fvo3efkydfkqcvj8Y2T8UlL8Q0P8MzP9k4Hz8/Lu7u4DdPj9/VrKysI9fPoDc/EAZ7z7IiLHYkjp6ekCcOTk5OIASbfY/v21takAJrT5Dg6sYkjc3Nn94t2RkYD+y8KeYkjs/v7l5fz0dF22YkjWvcOLAAAAgElEQVR4AR2KNULFQBgGZ5J13KGGKvc/Cw1uPe62eb9+Jr1EUBFHSgxxjP2Eca6AfUSfVlUfBvm1Ui1bqafctqMndNkXpb01h5TLx4b6TIXgwOCHfjv+/Pz+5vPRw7txGWT2h6yO0/GaYltIp5PT1dEpLNPL/SdWjYjAAZtvRPgHJX4Xio+DSrkAAAAASUVORK5CYII=" alt="English" width="16" height="11" />
</Link>
<Link
href={getPathForLocale('de')}
className={`hover:text-primary transition-colors flex items-center gap-1 ${currentLocale === 'de' ? 'text-primary font-bold' : 'opacity-80'}`}
>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAIAAAD5gJpuAAABLElEQVR4AY2QgUZEQRSGz9ydmzbYkBWABBJYABHEFhJ6m0WP0DMEQNIr9AKrN8ne2Tt3Zs7MOdOZmRBEv+v34Tvub9R6fdNlAzU+snSME/wdjbjbbJ6EiEg6BA8102QbjKNpoMzw8v6qD/sOALbbT2MC1NgaAWOKOgxf5czY+4dbAX2G/THzcozLrvPV85IQyqVz0rvg2p9Pei4HjzSsiFbV4JgyhhxCjpGdZ0RhdikLB9/b8Qig7MkpSovR7Cp59q6CazaNFiTt4J82o6uvdMVwTsztKTXZod4jgOJJuqNAjFyGrBR8gM6XwKfIC4KanBSTZ0rClKh08D9DFh3egW7ebH7NcRDQWrz9rM2Ne+mDOXB2mZJ8agL19nwxR2iZXGm1gDbQKhDjd4yHb2oW/KR8xHicAAAAAElFTkSuQmCC" alt="Deutsch" width="16" height="11" />
</Link>
</div>
<Button
href="/contact"
variant="outline"
className={cn(
"rounded-full px-6 transition-colors",
isHomePage && !isScrolled
? "border-white text-white hover:bg-white hover:text-black"
: "border-primary text-primary hover:bg-primary hover:text-white"
)}
>
Get in touch
</Button>
</div>
{/* Mobile Menu Button */}
<button className={cn("lg:hidden p-2", textColorClass)}>
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
{/* Mobile Menu Button (Placeholder) */}
<button className="md:hidden p-2 text-text-primary">
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
</header>
</header>
{!isHomePage && <div className="h-24 md:h-32" />}
</>
);
}