diff --git a/components/Header.tsx b/components/Header.tsx
index 0dfb843e..546c0548 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -185,24 +185,40 @@ export default function Header() {
className="animate-in fade-in slide-in-from-bottom-4 fill-mode-both"
style={{ animationDuration: '500ms', animationDelay: `${150 + idx * 80}ms` }}
>
- {
- 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',
- )}
- >
- {item.label}
-
-
+ {(() => {
+ const fullHref = `/${currentLocale}${item.href === '/' ? '' : item.href}`;
+ const isActive =
+ item.href === '/'
+ ? pathname === `/${currentLocale}` || pathname === '/'
+ : pathname.startsWith(fullHref);
+ return (
+ {
+ 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}
+
+
+ );
+ })()}
))}
@@ -346,6 +362,15 @@ export default function Header() {
>
{
setIsMobileMenuOpen(false);
trackEvent(AnalyticsEvents.LINK_CLICK, {
@@ -354,7 +379,12 @@ export default function Header() {
location: 'mobile_menu',
});
}}
- className="text-2xl md:text-3xl font-extrabold text-white hover:text-accent transition-all transform block py-4"
+ 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}