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-06 13:55:04 +01:00
parent 297de69928
commit f991ea6b9b
393 changed files with 41362 additions and 4811 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
components/layout/Header.tsx
View File

@@ -13,33 +13,47 @@ interface HeaderProps {
}
export function Header({ locale, siteName = 'KLZ Cables', logo }: HeaderProps) {
const isSvgLogo = logo?.endsWith('.svg');
return (
<header className="sticky top-0 z-50 bg-white border-b border-gray-200 shadow-sm">
<Container maxWidth="6xl" padding="md">
<div className="flex items-center justify-between h-16">
{/* Logo and Branding */}
<div className="flex items-center gap-3">
<Link
href={`/${locale}`}
<Link
href={`/${locale}`}
className="flex items-center gap-2 hover:opacity-80 transition-opacity"
>
{logo ? (
<div className="relative h-8 w-auto">
<Image
src={logo.replace(/^\//, '')}
alt={siteName}
fill
className="object-contain"
sizes="(max-width: 768px) 100vw, 120px"
priority={false}
/>
<div className="h-8 sm:h-10 md:h-12 w-auto flex items-center justify-center">
{isSvgLogo ? (
// For SVG, use img tag with proper path handling
<img
src={logo}
alt={siteName}
className="h-full w-auto object-contain"
/>
) : (
// For other images, use Next.js Image with optimized sizes
<div className="relative h-8 sm:h-10 md:h-12 w-auto">
<Image
src={logo}
alt={siteName}
fill
className="object-contain"
sizes="(max-width: 640px) 100vw, (max-width: 768px) 120px, 144px"
priority={false}
/>
</div>
)}
</div>
) : (
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
<span className="text-white font-bold text-sm">KLZ</span>
<div className="w-8 sm:w-10 md:w-12 h-8 sm:h-10 md:h-12 bg-primary rounded-lg flex items-center justify-center">
<span className="text-white font-bold text-xs sm:text-sm">KLZ</span>
</div>
)}
<span className="hidden sm:block font-bold text-lg text-gray-900">
<span className="hidden sm:block font-bold text-lg md:text-xl text-gray-900">
{siteName}
</span>
</Link>

59
components/layout/MobileMenu.tsx
View File

@@ -16,15 +16,8 @@ interface MobileMenuProps {
export function MobileMenu({ locale, siteName, logo, onClose }: MobileMenuProps) {
const [isOpen, setIsOpen] = useState(false);
const [isMounted, setIsMounted] = useState(false);
const pathname = usePathname();
useEffect(() => {
setIsMounted(true);
}, []);
// Close menu when route changes
// Main navigation menu
const mainMenu = [
{ title: 'Home', path: `/${locale}` },
@@ -56,6 +49,8 @@ export function MobileMenu({ locale, siteName, logo, onClose }: MobileMenuProps)
if (onClose) onClose();
};
const isSvgLogo = logo?.endsWith('.svg');
return (
<>
{/* Mobile Toggle Button */}
@@ -102,15 +97,25 @@ export function MobileMenu({ locale, siteName, logo, onClose }: MobileMenuProps)
<div className="flex items-center justify-between p-4 border-b border-gray-200 safe-area-p">
<div className="flex items-center gap-3">
{logo ? (
<div className="relative w-10 h-10">
<Image
src={logo.replace(/^\//, '')}
alt={siteName}
fill
className="object-contain"
sizes="40px"
priority={false}
/>
<div className="w-10 h-10 flex items-center justify-center">
{isSvgLogo ? (
<img
src={logo}
alt={siteName}
className="w-full h-full object-contain"
/>
) : (
<div className="relative w-10 h-10">
<Image
src={logo}
alt={siteName}
fill
className="object-contain"
sizes="40px"
priority={false}
/>
</div>
)}
</div>
) : (
<div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center shadow-sm">
@@ -215,17 +220,17 @@ export function MobileMenu({ locale, siteName, logo, onClose }: MobileMenuProps)
</div>
{/* Footer CTA */}
<div className="p-4 border-t border-gray-200 bg-gray-50">
<Link href={`/${locale}/contact`} onClick={closeMenu} className="block w-full">
<Button
variant="primary"
size="md"
fullWidth
>
Get in Touch
</Button>
</Link>
</div>
<div className="p-4 border-t border-gray-200 bg-gray-50">
<Link href={`/${locale}/contact`} onClick={closeMenu} className="block w-full">
<Button
variant="primary"
size="md"
fullWidth
>
Get in Touch
</Button>
</Link>
</div>
</div>
</div>
</>