diff --git a/src/app/(admin)/mobile-nav.tsx b/src/app/(admin)/mobile-nav.tsx index 783eaf0..9e38795 100644 --- a/src/app/(admin)/mobile-nav.tsx +++ b/src/app/(admin)/mobile-nav.tsx @@ -4,7 +4,7 @@ import { useState } from "react"; import Link from "next/link"; import { usePathname } from "next/navigation"; import { MoreHorizontal, X } from "lucide-react"; -import { links, PRIMARY_COUNT } from "./nav-data"; +import { links, PRIMARY_COUNT, isLinkActive } from "./nav-data"; export function MobileNav({ isAdmin }: { isAdmin: boolean }) { const pathname = usePathname(); @@ -13,10 +13,10 @@ export function MobileNav({ isAdmin }: { isAdmin: boolean }) { const visibleLinks = links.filter((link) => !link.adminOnly || isAdmin); const primary = visibleLinks.slice(0, PRIMARY_COUNT); const overflow = visibleLinks.slice(PRIMARY_COUNT); - const overflowActive = overflow.some((l) => pathname.startsWith(l.href)); + const overflowActive = overflow.some((l) => isLinkActive(l, pathname, visibleLinks)); function isActive(link: (typeof links)[number]) { - return link.exact ? pathname === link.href : pathname.startsWith(link.href); + return isLinkActive(link, pathname, visibleLinks); } return ( diff --git a/src/app/(admin)/nav-data.ts b/src/app/(admin)/nav-data.ts index 595f679..6d756c0 100644 --- a/src/app/(admin)/nav-data.ts +++ b/src/app/(admin)/nav-data.ts @@ -23,3 +23,15 @@ export const links: NavLink[] = [ ]; export const PRIMARY_COUNT = 4; + +/** + * Highlights only the most specific match — e.g. on "/bookings/new", both it + * (exact) and "/bookings" (prefix) technically match; without this, both + * would light up at once. Picks the matching link with the longest href. + */ +export function isLinkActive(link: NavLink, pathname: string, allLinks: NavLink[]): boolean { + const matches = allLinks.filter((l) => (l.exact ? pathname === l.href : pathname.startsWith(l.href))); + if (matches.length === 0) return false; + const best = matches.reduce((a, b) => (b.href.length > a.href.length ? b : a)); + return best.href === link.href; +} diff --git a/src/app/(admin)/nav-links.tsx b/src/app/(admin)/nav-links.tsx index e4e9bcf..cac7eab 100644 --- a/src/app/(admin)/nav-links.tsx +++ b/src/app/(admin)/nav-links.tsx @@ -2,7 +2,7 @@ import Link from "next/link"; import { usePathname } from "next/navigation"; -import { links } from "./nav-data"; +import { links, isLinkActive } from "./nav-data"; export function NavLinks({ isAdmin }: { isAdmin: boolean }) { const pathname = usePathname(); @@ -10,8 +10,9 @@ export function NavLinks({ isAdmin }: { isAdmin: boolean }) { return (