From 4aa5b924fcac2d85044d927fec9ca3d63c08e614 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Tue, 30 Jun 2026 21:45:39 +0000
Subject: [PATCH] fix(Navbar): replace Next.js Link with <a> + onClick for
 anchor navigation

Next.js Link appends hash instead of replacing it (#a#b#b...). Anchor
links now use native <a> with e.preventDefault(), manual scrollIntoView,
and history.replaceState so only the current hash appears in the URL.
Page routes (/shop etc.) still use Link as before.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/components/Navbar.tsx | 33 ++++++++++++++++++++++++---------
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
index 8fdd427..3481b44 100644
--- a/app/components/Navbar.tsx
+++ b/app/components/Navbar.tsx
@@ -43,15 +43,30 @@ export function Navbar() {
 
         {/* Nav links */}
         <nav className="flex items-center gap-[3rem]">
-          {navLinks.map((link) => (
-            <Link
-              key={link.href}
-              href={link.href}
-              className="text-[1.125rem] font-semibold text-[#222221] tracking-[0.01125rem] hover:text-[#f6a701] transition-colors"
-            >
-              {link.label}
-            </Link>
-          ))}
+          {navLinks.map((link) =>
+            link.href.startsWith("#") ? (
+              <a
+                key={link.href}
+                href={link.href}
+                onClick={(e) => {
+                  e.preventDefault();
+                  document.getElementById(link.href.slice(1))?.scrollIntoView({ behavior: "smooth" });
+                  history.replaceState(null, "", link.href);
+                }}
+                className="text-[1.125rem] font-semibold text-[#222221] tracking-[0.01125rem] hover:text-[#f6a701] transition-colors cursor-pointer"
+              >
+                {link.label}
+              </a>
+            ) : (
+              <Link
+                key={link.href}
+                href={link.href}
+                className="text-[1.125rem] font-semibold text-[#222221] tracking-[0.01125rem] hover:text-[#f6a701] transition-colors"
+              >
+                {link.label}
+              </Link>
+            )
+          )}
         </nav>
 
         {/* CTA buttons */}