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

migration wip

Browse Source
This commit is contained in:
Marc Mintel
2025-12-30 12:10:13 +01:00
parent 89dbf8af87
commit 65a7e9f24a
203 changed files with 192475 additions and 1562 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/layout/Header.tsx
View File

@@ -1,4 +1,5 @@
import Link from 'next/link';
import Image from 'next/image';
import { Container } from '@/components/ui/Container';
import { Button } from '@/components/ui/Button';
import { Navigation } from './Navigation';
@@ -23,7 +24,16 @@ export function Header({ locale, siteName = 'KLZ Cables', logo }: HeaderProps) {
className="flex items-center gap-2 hover:opacity-80 transition-opacity"
>
{logo ? (
<img src={logo} alt={siteName} className="h-8 w-auto" />
<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>
) : (
<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>
@@ -51,7 +61,7 @@ export function Header({ locale, siteName = 'KLZ Cables', logo }: HeaderProps) {
{/* Mobile Menu */}
<div className="flex items-center gap-2">
<MobileMenu locale={locale} siteName={siteName} />
<MobileMenu locale={locale} siteName={siteName} logo={logo} />
</div>
</div>
</Container>

23
components/layout/MobileMenu.tsx
View File

@@ -2,6 +2,7 @@
import { useState, useEffect } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { usePathname } from 'next/navigation';
import { Button } from '@/components/ui/Button';
import { LocaleSwitcher } from '@/components/LocaleSwitcher';
@@ -9,10 +10,11 @@ import { LocaleSwitcher } from '@/components/LocaleSwitcher';
interface MobileMenuProps {
locale: string;
siteName: string;
logo?: string;
onClose?: () => void;
}
export function MobileMenu({ locale, siteName, onClose }: MobileMenuProps) {
export function MobileMenu({ locale, siteName, logo, onClose }: MobileMenuProps) {
const [isOpen, setIsOpen] = useState(false);
const [isMounted, setIsMounted] = useState(false);
const pathname = usePathname();
@@ -99,9 +101,22 @@ export function MobileMenu({ locale, siteName, onClose }: MobileMenuProps) {
{/* Header */}
<div className="flex items-center justify-between p-4 border-b border-gray-200 safe-area-p">
<div className="flex items-center gap-3">
<div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center shadow-sm">
<span className="text-white font-bold text-sm">KLZ</span>
</div>
{logo ? (
<div className="relative w-10 h-10">
<Image
src={logo.replace(/^\//, '')}
alt={siteName}
fill
className="object-contain"
sizes="40px"
priority={false}
/>
</div>
) : (
<div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center shadow-sm">
<span className="text-white font-bold text-sm">KLZ</span>
</div>
)}
<span className="font-semibold text-gray-900 text-lg">{siteName}</span>
</div>
<button