This repository has no description
Something went wrong. Try again.
2.4 kB · 64 lines
TSX
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465import Link from 'next/link'import siteConfig from '@/lib/site-config'import { NavLink } from './NavLink'import { MobileMenuToggle } from './MobileMenuToggle'
export function Nav() { const navLinks = siteConfig.headerNavLinks ?? []
return ( <header className="bg-paper border-hair sticky top-0 z-50 border-b"> <div className="max-w-shell mx-auto grid h-[72px] grid-cols-[auto_1fr_auto] items-center gap-4 px-5 md:gap-8 md:px-10"> <Link href="/" className="text-ink flex items-center gap-3.5"> <span className="text-ink inline-flex items-baseline font-mono text-[20px] leading-none font-medium tracking-[-0.01em]"> <span className="text-ink-4 font-normal" aria-hidden="true">[</span> arter.dev <span className="text-ink-4 font-normal" aria-hidden="true">]</span> </span> <span className="text-ink-3 hidden font-mono text-[10.5px] tracking-wider uppercase md:inline"> A Log of Tech & Cars </span> </Link>
<ul className="m-0 hidden list-none justify-center gap-0.5 p-0 md:flex"> {navLinks.map((link) => ( <li key={link.href}> <NavLink href={link.href} activeClassName="text-ink pl-[22px]" inactiveClassName="text-ink-3 hover:text-ink" showArrow className="tracking-mono relative block px-4 py-2.5 font-mono text-xs uppercase transition-colors" > {link.text} </NavLink> </li> ))} </ul>
<div className="flex min-w-[44px] items-center justify-end"> <MobileMenuToggle /> </div> </div>
<ul id="mobile-menu" className="mobile-menu border-hair m-0 hidden list-none flex-col border-t p-0 md:hidden" aria-hidden="true" > {navLinks.map((link) => ( <li key={link.href}> <NavLink href={link.href} activeClassName="text-ink" inactiveClassName="text-ink-2 hover:text-ink" className="tracking-mono block border-b border-white/5 px-5 py-3.5 font-mono text-[13px] uppercase" > {link.text} </NavLink> </li> ))} </ul> </header> )}