From 0b3de9f98c4daf5f71b353baeb2dbff42f19e311 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Wed, 25 Feb 2026 02:49:10 +0100
Subject: [PATCH] fix: add active navigation state detection and aria-current
 for desktop and mobile nav

---
 components/Header.tsx | 68 +++++++++++++++++++++++++++++++------------
 1 file changed, 49 insertions(+), 19 deletions(-)

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` }}
                 >
-                  <Link
-                    href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
-                    onClick={() => {
-                      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}
-                    <span className="absolute -bottom-2 left-0 w-0 h-1 bg-accent transition-all duration-500 group-hover:w-full rounded-full shadow-[0_0_12px_rgba(130,237,32,0.6)]" />
-                  </Link>
+                  {(() => {
+                    const fullHref = `/${currentLocale}${item.href === '/' ? '' : item.href}`;
+                    const isActive =
+                      item.href === '/'
+                        ? pathname === `/${currentLocale}` || pathname === '/'
+                        : pathname.startsWith(fullHref);
+                    return (
+                      <Link
+                        href={fullHref}
+                        aria-current={isActive ? 'page' : undefined}
+                        onClick={() => {
+                          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}
+                        <span
+                          className={cn(
+                            'absolute -bottom-2 left-0 h-1 bg-accent transition-all duration-500 rounded-full shadow-[0_0_12px_rgba(130,237,32,0.6)]',
+                            isActive ? 'w-full' : 'w-0 group-hover:w-full',
+                          )}
+                        />
+                      </Link>
+                    );
+                  })()}
                 </div>
               ))}
             </nav>
@@ -346,6 +362,15 @@ export default function Header() {
               >
                 <Link
                   href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
+                  aria-current={
+                    (
+                      item.href === '/'
+                        ? pathname === `/${currentLocale}` || pathname === '/'
+                        : pathname.startsWith(`/${currentLocale}${item.href}`)
+                    )
+                      ? 'page'
+                      : undefined
+                  }
                   onClick={() => {
                     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}
                 </Link>