From 494e963fa30506e4ff6d2f4574f78bdfa283e053 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Tue, 1 Sep 2026 19:36:02 +0200
Subject: [PATCH] Streamline the desktop nav with the mobile drawer's tab style

Desktop tabs drop the uppercase/underline treatment for plain-case
labels with a per-icon primary tint, and the active tab lights up
with a bg-primary/10 fill (no border) instead of an underline -
matching the mobile drawer's active-row treatment.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 components/layout/NavBar.tsx | 39 +++++++++++++++++++-----------------
 1 file changed, 21 insertions(+), 18 deletions(-)

diff --git a/components/layout/NavBar.tsx b/components/layout/NavBar.tsx
index 8763d3e..c28d50d 100644
--- a/components/layout/NavBar.tsx
+++ b/components/layout/NavBar.tsx
@@ -23,26 +23,29 @@ function isActive(pathname: string, href: string): boolean {
   return href === "/" ? pathname === "/" : pathname === href || pathname.startsWith(`${href}/`);
 }
 
+/** Desktop tab strip - borderless chips; the active tab lights up with a
+ * primary-tinted fill, matching the drawer rows' active treatment. */
 function NavLinks({ onNavigate }: { onNavigate?: () => void }) {
   const pathname = usePathname();
   return (
     <>
-      {LINKS.map((link) => (
-        <Link
-          key={link.href}
-          href={link.href}
-          onClick={onNavigate}
-          className={cn(
-            "flex items-center gap-1.5 border-b-2 px-2.5 py-1.5 text-xs font-medium tracking-wide uppercase transition-colors",
-            isActive(pathname, link.href)
-              ? "border-primary text-foreground"
-              : "border-transparent text-muted-foreground hover:text-foreground",
-          )}
-        >
-          <link.icon className="size-3.5" />
-          {link.label}
-        </Link>
-      ))}
+      {LINKS.map((link) => {
+        const active = isActive(pathname, link.href);
+        return (
+          <Link
+            key={link.href}
+            href={link.href}
+            onClick={onNavigate}
+            className={cn(
+              "flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-sm font-medium transition-colors",
+              active ? "bg-primary/10 text-foreground" : "text-muted-foreground hover:text-foreground",
+            )}
+          >
+            <link.icon className={cn("size-3.5", active && "text-primary")} />
+            {link.label}
+          </Link>
+        );
+      })}
     </>
   );
 }
@@ -62,7 +65,7 @@ function MobileNavLinks({ onNavigate }: { onNavigate: () => void }) {
             onClick={onNavigate}
             className={cn(
               "flex items-center gap-3 rounded-lg px-3 py-3 text-sm font-medium transition-colors",
-              active ? "bg-accent text-foreground" : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
+              active ? "bg-primary/10 text-foreground" : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
             )}
           >
             <link.icon className={cn("size-4 shrink-0", active && "text-primary")} />
@@ -120,7 +123,7 @@ export function NavBar() {
           <span className="font-heading text-lg font-semibold">Sexy</span>
         </Link>
 
-        <nav className="hidden items-center gap-1 md:flex">
+        <nav className="hidden items-center gap-1.5 md:flex">
           <NavLinks />
         </nav>