Fixes mobile layout

src/components/Nav.tsx

@@ -1,8 +1,16 @@
+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">
@@ -16,7 +24,7 @@ export function Nav() {
         <ul className="flex items-center gap-7">
           {navLinks.map((link) =>
             link.isCta ? (
-              <li key={link.href}>
+              <li key={link.href} className="hidden sm:block">
                 <a
                   href={link.href}
                   onClick={(event) => handleAnchorClick(event, link.href)}
@@ -41,8 +49,60 @@ export function Nav() {
           <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>
   );
 }