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

fix: deploy issues
Some checks failed
CI - Lint, Typecheck & Test / quality-assurance (push) Failing after 34s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-02-10 11:52:10 +01:00
parent cb51c37207
commit ae7a45a911
7 changed files with 123 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
components/Header.tsx
View File

@@ -14,10 +14,10 @@ export default function Header() {
const pathname = usePathname();
const [isScrolled, setIsScrolled] = useState(false);
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
// Extract locale from pathname
const currentLocale = pathname.split('/')[1] || 'en';
// Check if homepage
const isHomePage = pathname === `/${currentLocale}` || pathname === '/';
@@ -32,8 +32,10 @@ export default function Header() {
// Close mobile menu on route change
useEffect(() => {
setIsMobileMenuOpen(false);
}, [pathname]);
if (isMobileMenuOpen) {
setIsMobileMenuOpen(false);
}
}, [pathname, isMobileMenuOpen]);
// Prevent scroll when mobile menu is open
useEffect(() => {
@@ -43,7 +45,7 @@ export default function Header() {
document.body.style.overflow = 'unset';
}
}, [isMobileMenuOpen]);
// Function to get path for a different locale
const getPathForLocale = (newLocale: string) => {
const segments = pathname.split('/');
@@ -59,15 +61,15 @@ export default function Header() {
];
const headerClass = cn(
"fixed top-0 left-0 right-0 z-50 transition-all duration-500 safe-area-p transform-gpu",
'fixed top-0 left-0 right-0 z-50 transition-all duration-500 safe-area-p transform-gpu',
{
"bg-transparent py-4 md:py-8": isHomePage && !isScrolled && !isMobileMenuOpen,
"bg-primary py-3 md:py-4 shadow-2xl": !isHomePage || isScrolled || isMobileMenuOpen,
}
'bg-transparent py-4 md:py-8': isHomePage && !isScrolled && !isMobileMenuOpen,
'bg-primary py-3 md:py-4 shadow-2xl': !isHomePage || isScrolled || isMobileMenuOpen,
},
);
const textColorClass = "text-white";
const logoSrc = "/logo-white.svg";
const textColorClass = 'text-white';
const logoSrc = '/logo-white.svg';
return (
<>
@@ -75,14 +77,14 @@ export default function Header() {
className={headerClass}
initial={{ y: -100, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ duration: 0.8, ease: "easeOut" }}
transition={{ duration: 0.8, ease: 'easeOut' }}
>
<div className="container mx-auto px-4 md:px-12 lg:px-16 max-w-7xl flex items-center justify-between">
<motion.div
className="flex-shrink-0 group touch-target"
initial={{ scale: 0.8, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
transition={{ duration: 0.6, ease: "easeOut", delay: 0.1 }}
transition={{ duration: 0.6, ease: 'easeOut', delay: 0.1 }}
>
<Link href={`/${currentLocale}`}>
<Image
@@ -105,25 +107,19 @@ export default function Header() {
visible: {
transition: {
staggerChildren: 0.08,
delayChildren: 0.3
}
}
delayChildren: 0.3,
},
},
}}
>
<motion.nav
className="hidden lg:flex items-center space-x-10"
variants={navVariants}
>
<motion.nav className="hidden lg:flex items-center space-x-10" variants={navVariants}>
{menuItems.map((item, idx) => (
<motion.div
key={item.href}
variants={navLinkVariants}
>
<motion.div key={item.href} variants={navLinkVariants}>
<Link
href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
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"
'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',
)}
>
{item.label}
@@ -134,7 +130,7 @@ export default function Header() {
</motion.nav>
<motion.div
className={cn("hidden lg:flex items-center space-x-8", textColorClass)}
className={cn('hidden lg:flex items-center space-x-8', textColorClass)}
variants={headerRightVariants}
>
<motion.div
@@ -174,11 +170,11 @@ export default function Header() {
</Link>
</motion.div>
</motion.div>
<motion.div
initial={{ scale: 0.9, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
transition={{ duration: 0.6, type: "spring", stiffness: 400, delay: 0.7 }}
transition={{ duration: 0.6, type: 'spring', stiffness: 400, delay: 0.7 }}
>
<Button
href={`/${currentLocale}/contact`}
@@ -193,11 +189,20 @@ export default function Header() {
{/* Mobile Menu Button */}
<motion.button
className={cn("lg:hidden touch-target p-2 rounded-xl bg-white/10 border border-white/20 z-50", textColorClass)}
className={cn(
'lg:hidden touch-target p-2 rounded-xl bg-white/10 border border-white/20 z-50',
textColorClass,
)}
aria-label={t('toggleMenu')}
initial={{ scale: 0.8, opacity: 0, rotate: -180 }}
animate={{ scale: 1, opacity: 1, rotate: 0 }}
transition={{ duration: 0.6, type: "spring", stiffness: 300, damping: 20, delay: 0.5 }}
transition={{
duration: 0.6,
type: 'spring',
stiffness: 300,
damping: 20,
delay: 0.5,
}}
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
>
<motion.svg
@@ -236,21 +241,25 @@ export default function Header() {
</div>
{/* Mobile Menu Overlay */}
<div className={cn(
"fixed inset-0 bg-primary z-40 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"
)}>
<div
className={cn(
'fixed inset-0 bg-primary z-40 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',
)}
>
<motion.div
className="flex-grow flex flex-col justify-center items-center p-8 space-y-8"
initial="closed"
animate={isMobileMenuOpen ? "open" : "closed"}
animate={isMobileMenuOpen ? 'open' : 'closed'}
variants={{
open: {
transition: {
staggerChildren: 0.1,
delayChildren: 0.2
}
}
delayChildren: 0.2,
},
},
}}
>
{menuItems.map((item, idx) => (
@@ -264,10 +273,10 @@ export default function Header() {
scale: 1,
transition: {
duration: 0.6,
ease: "easeOut",
delay: idx * 0.08
}
}
ease: 'easeOut',
delay: idx * 0.08,
},
},
}}
>
<Link
@@ -278,7 +287,7 @@ export default function Header() {
</Link>
</motion.div>
))}
<motion.div
className="pt-8 border-t border-white/10 w-full flex flex-col items-center space-y-8"
initial={{ opacity: 0, y: 30 }}
@@ -322,11 +331,11 @@ export default function Header() {
</Link>
</motion.div>
</motion.div>
<motion.div
initial={{ scale: 0.9, opacity: 0, y: 20 }}
animate={{ scale: 1, opacity: 1, y: 0 }}
transition={{ type: "spring", stiffness: 400, damping: 20, delay: 1.2 }}
transition={{ type: 'spring', stiffness: 400, damping: 20, delay: 1.2 }}
>
<Button
href={`/${currentLocale}/contact`}
@@ -338,23 +347,23 @@ export default function Header() {
</Button>
</motion.div>
</motion.div>
{/* Bottom Branding */}
<motion.div
className="p-12 flex justify-center opacity-20"
initial={{ opacity: 0, scale: 0.8 }}
animate={isMobileMenuOpen ? { opacity: 0.2, scale: 1 } : { opacity: 0, scale: 0.8 }}
transition={{ duration: 0.5, delay: 1.4 }}
>
{/* Bottom Branding */}
<motion.div
initial={{ scale: 0.5 }}
animate={{ scale: 1 }}
transition={{ type: "spring", stiffness: 300, delay: 1.5 }}
className="p-12 flex justify-center opacity-20"
initial={{ opacity: 0, scale: 0.8 }}
animate={isMobileMenuOpen ? { opacity: 0.2, scale: 1 } : { opacity: 0, scale: 0.8 }}
transition={{ duration: 0.5, delay: 1.4 }}
>
<Image src="/logo-white.svg" alt={t('home')} width={80} height={80} unoptimized />
<motion.div
initial={{ scale: 0.5 }}
animate={{ scale: 1 }}
transition={{ type: 'spring', stiffness: 300, delay: 1.5 }}
>
<Image src="/logo-white.svg" alt={t('home')} width={80} height={80} unoptimized />
</motion.div>
</motion.div>
</motion.div>
</motion.div>
</div>
</motion.header>
</>
@@ -367,9 +376,9 @@ const navVariants = {
opacity: 1,
transition: {
staggerChildren: 0.06,
delayChildren: 0.1
}
}
delayChildren: 0.1,
},
},
} as const;
const navLinkVariants = {
@@ -380,9 +389,9 @@ const navLinkVariants = {
scale: 1,
transition: {
duration: 0.5,
ease: "easeOut"
}
}
ease: 'easeOut',
},
},
} as const;
const headerRightVariants = {
@@ -390,6 +399,6 @@ const headerRightVariants = {
visible: {
opacity: 1,
x: 0,
transition: { duration: 0.6, ease: "easeOut" }
}
transition: { duration: 0.6, ease: 'easeOut' },
},
} as const;