HangerThem
42b3888a76
- aria-labels on share links, sidebar social links and mobile nav icons - aria-current on active nav links - CopyButton: React state instead of innerHTML mutation, clipboard error handling, accessible label and a polite live region for feedback (Related code-block and image-caption a11y fixes landed with the ImageWrapper/CodeWrapper rewrite in the previous perf commit.) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
'use client'
|
|
|
|
import { cn } from '@/utils/cn'
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
import { ExternalLink } from '@/components/ui/ExternalLink'
|
|
import { navItems } from '@/components/layout/navItems'
|
|
|
|
export function NavLinks() {
|
|
const pathname = usePathname()
|
|
|
|
const isActive = (href: string) => {
|
|
if (href === '/') {
|
|
return pathname === href
|
|
}
|
|
return pathname?.startsWith(href)
|
|
}
|
|
|
|
return navItems.map((item) => (
|
|
<li
|
|
key={item.href}
|
|
className={cn(
|
|
'transition-colors rounded-md',
|
|
isActive(item.href) ? 'text-fg bg-fg/25' : 'text-fg-dim hover:text-fg hover:bg-fg/10',
|
|
)}
|
|
>
|
|
{item.isExternal ? (
|
|
<ExternalLink
|
|
href={item.href}
|
|
className="flex items-center gap-2 px-2 py-1 hover:no-underline focus:no-underline"
|
|
skipIcon
|
|
>
|
|
{item.icon}
|
|
{item.label}
|
|
</ExternalLink>
|
|
) : (
|
|
<Link
|
|
href={item.href}
|
|
className="flex items-center gap-2 px-2 py-1"
|
|
aria-current={isActive(item.href) ? 'page' : undefined}
|
|
>
|
|
{item.icon}
|
|
{item.label}
|
|
</Link>
|
|
)}
|
|
</li>
|
|
))
|
|
}
|