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

fix: add active navigation state detection and aria-current for desktop and mobile nav
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 9s
Details
Build & Deploy / 🧪 QA (push) Successful in 2m38s
Details
Build & Deploy / 🚀 Deploy (push) Has been cancelled
Details
Build & Deploy / 🧪 Post-Deploy Verification (push) Has been cancelled
Details
Build & Deploy / ⚡ Performance & Accessibility (push) Has been cancelled
Details
Build & Deploy / 🔔 Notify (push) Has been cancelled
Details
Build & Deploy / 🏗️ Build (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-02-25 02:49:10 +01:00
parent 5813b4bd49
commit 0b3de9f98c
1 changed files with 49 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
components/Header.tsx
View File

@@ -185,24 +185,40 @@ export default function Header() {
className="animate-in fade-in slide-in-from-bottom-4 fill-mode-both" className="animate-in fade-in slide-in-from-bottom-4 fill-mode-both"
style={{ animationDuration: '500ms', animationDelay: `${150 + idx * 80}ms` }} style={{ animationDuration: '500ms', animationDelay: `${150 + idx * 80}ms` }}
> >
<Link {(() => {
href={`/${currentLocale}${item.href === '/' ? '' : item.href}`} const fullHref = `/${currentLocale}${item.href === '/' ? '' : item.href}`;
onClick={() => { const isActive =
setIsMobileMenuOpen(false); item.href === '/'
trackEvent(AnalyticsEvents.LINK_CLICK, { ? pathname === `/${currentLocale}` || pathname === '/'
label: item.label, : pathname.startsWith(fullHref);
href: item.href, return (
location: 'header_nav', <Link
}); href={fullHref}
}} aria-current={isActive ? 'page' : undefined}
className={cn( onClick={() => {
textColorClass, setIsMobileMenuOpen(false);
'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', trackEvent(AnalyticsEvents.LINK_CLICK, {
)} label: item.label,
> href: item.href,
{item.label} location: 'header_nav',
<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> }}
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> </div>
))} ))}
</nav> </nav>
@@ -346,6 +362,15 @@ export default function Header() {
> >
<Link <Link
href={`/${currentLocale}${item.href === '/' ? '' : item.href}`} href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
aria-current={
(
item.href === '/'
? pathname === `/${currentLocale}` || pathname === '/'
: pathname.startsWith(`/${currentLocale}${item.href}`)
)
? 'page'
: undefined
}
onClick={() => { onClick={() => {
setIsMobileMenuOpen(false); setIsMobileMenuOpen(false);
trackEvent(AnalyticsEvents.LINK_CLICK, { trackEvent(AnalyticsEvents.LINK_CLICK, {
@@ -354,7 +379,12 @@ export default function Header() {
location: 'mobile_menu', 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} {item.label}
</Link> </Link>