SlpSoftware/src/components/Nav.tsx

import { useState } from 'react';
import { navLinks } from '../data/content';
import { ThemeToggle } from './ThemeToggle';
import { handleAnchorClick } from '../utils/scrollToHash';

export function Nav() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  function handleMobileLinkClick(event: React.MouseEvent<HTMLAnchorElement>, href: string) {
    handleAnchorClick(event, href);
    setIsMenuOpen(false);
  }

  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} className="hidden sm:block">
                <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>
          <li className="sm:hidden">
            <button
              type="button"
              onClick={() => setIsMenuOpen((open) => !open)}
              aria-label={isMenuOpen ? 'Sluit menu' : 'Open menu'}
              aria-expanded={isMenuOpen}
              aria-controls="mobile-nav-menu"
              data-testid="nav-mobile-toggle"
              className="flex h-8 w-8 items-center justify-center rounded-full border border-line text-text transition-colors hover:border-accent-line"
            >
              <span className="sr-only">{isMenuOpen ? 'Sluit menu' : 'Open menu'}</span>
              <svg
                aria-hidden="true"
                viewBox="0 0 24 24"
                width="18"
                height="18"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
              >
                {isMenuOpen ? (
                  <path d="M6 6l12 12M18 6L6 18" />
                ) : (
                  <path d="M4 7h16M4 12h16M4 17h16" />
                )}
              </svg>
            </button>
          </li>
        </ul>
      </div>
      {isMenuOpen ? (
        <ul
          id="mobile-nav-menu"
          data-testid="nav-mobile-menu"
          className="flex flex-col gap-1 border-t border-line bg-bg px-6 py-3 sm:hidden"
        >
          {navLinks.map((link) => (
            <li key={link.href}>
              <a
                href={link.href}
                onClick={(event) => handleMobileLinkClick(event, link.href)}
                className={
                  link.isCta
                    ? 'font-mono block rounded-lg border border-accent-line bg-accent-soft px-4 py-2 text-sm font-medium text-text'
                    : 'block px-1 py-2 text-sm font-medium text-muted transition-colors hover:text-text'
                }
              >
                {link.label}
              </a>
            </li>
          ))}
        </ul>
      ) : null}
    </nav>
  );
}