valknar/sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Streamline the desktop nav with the mobile drawer's tab style

Browse Source 
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>
This commit is contained in:
valknar
2026-09-01 19:36:02 +02:00
co-authored by Claude Sonnet 5
parent f8f687af4e
commit 494e963fa3
1 changed files with 21 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/layout/NavBar.tsx
+12 -9
View File
@@ -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",
isActive(pathname, link.href)
? "border-primary text-foreground"
: "border-transparent text-muted-foreground hover:text-foreground",
"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="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>