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

@@ -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) => (
+      {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 border-b-2 px-2.5 py-1.5 text-xs font-medium tracking-wide uppercase transition-colors",
+              "flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-sm font-medium transition-colors",
-            isActive(pathname, link.href)
+              active ? "bg-primary/10 text-foreground" : "text-muted-foreground hover:text-foreground",
-              ? "border-primary text-foreground"
-              : "border-transparent text-muted-foreground hover:text-foreground",
             )}
           >
-          <link.icon className="size-3.5" />
+            <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>