HangerThem
4485f3ef1e
- 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.)
40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
'use client'
|
|
|
|
import { usePathname } from 'next/navigation'
|
|
import Link from 'next/link'
|
|
import { navItems } from '@/components/layout/navItems'
|
|
import { cn } from '@/utils/cn'
|
|
|
|
export function MobileNavbar() {
|
|
const pathname = usePathname()
|
|
|
|
const isActive = (href: string) => {
|
|
if (href === '/') {
|
|
return pathname === href
|
|
}
|
|
return pathname?.startsWith(href)
|
|
}
|
|
|
|
return (
|
|
<nav className="lg:hidden fixed bottom-0 left-0 right-0 bg-bg border-t border-border z-50">
|
|
<div className="flex justify-between items-center p-4 max-w-90 mx-auto">
|
|
{navItems
|
|
.filter((item) => !item.isExternal)
|
|
.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
aria-label={item.label}
|
|
aria-current={isActive(item.href) ? 'page' : undefined}
|
|
className={cn(
|
|
'transition-colors',
|
|
isActive(item.href) ? 'text-accent' : 'text-fg-dim hover:text-fg',
|
|
)}
|
|
>
|
|
{item.icon}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|