Nav Link Patterns

รวม navigation link patterns — NavLink reusable component พร้อม variant: default, underline, highlight, animated

NavLink — Reusable Component

Wrapper รอบ Next.js Link + usePathname() — auto-detect isActive, รับ variant/icon/exact props

Reusable component — import แล้วใช้ได้เลย ดู variant ตัวอย่างด้านล่าง

defaultunderlinehighlightanimated

variant="default" — plain link + link with Lucide icon, auto-detect active state

Without icon

With icon

variant="underline" — แสดง underline เมื่อ active (ใช้จริงใน header navigation)

variant="highlight" — rounded bg-accent เมื่อ active (ใช้จริงใน sidebar)

variant="animated" — CSS scaleX transition on hover + active (ไม่ใช้ Framer Motion)