49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
import { navLinks } from '../data/content';
|
|
import { ThemeToggle } from './ThemeToggle';
|
|
import { handleAnchorClick } from '../utils/scrollToHash';
|
|
|
|
export function Nav() {
|
|
return (
|
|
<nav className="sticky top-0 z-50 border-b border-line bg-bg/80 backdrop-blur-md">
|
|
<div className="mx-auto flex h-16 max-w-[1080px] items-center justify-between px-6">
|
|
<a
|
|
href="#top"
|
|
onClick={(event) => handleAnchorClick(event, '#top')}
|
|
className="font-mono text-base font-bold tracking-wide text-text"
|
|
>
|
|
SLP<span className="text-accent">.</span>Software
|
|
</a>
|
|
<ul className="flex items-center gap-7">
|
|
{navLinks.map((link) =>
|
|
link.isCta ? (
|
|
<li key={link.href}>
|
|
<a
|
|
href={link.href}
|
|
onClick={(event) => handleAnchorClick(event, link.href)}
|
|
className="font-mono rounded-lg border border-accent-line bg-accent-soft px-4 py-2 text-sm font-medium text-text"
|
|
data-testid="nav-cta-link"
|
|
>
|
|
{link.label}
|
|
</a>
|
|
</li>
|
|
) : (
|
|
<li key={link.href} className="hidden sm:block">
|
|
<a
|
|
href={link.href}
|
|
onClick={(event) => handleAnchorClick(event, link.href)}
|
|
className="text-sm font-medium text-muted transition-colors hover:text-text"
|
|
>
|
|
{link.label}
|
|
</a>
|
|
</li>
|
|
),
|
|
)}
|
|
<li>
|
|
<ThemeToggle />
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|