From 4ef0fd1a688c56995e5cf61278e677845508139c Mon Sep 17 00:00:00 2001 From: g Date: Sun, 30 Nov 2025 00:29:57 +0000 Subject: [PATCH] Improve nav active state detection logic Refined the active state logic in NavItem to ensure /dashboard and /dashboard/admin only match exactly, preventing sub-paths from being incorrectly marked as active. --- app/dashboard/admin/ban/page.tsx | 2 +- components/layout/nav-item.tsx | 10 ++++++++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/app/dashboard/admin/ban/page.tsx b/app/dashboard/admin/ban/page.tsx index 370fc93..6add508 100644 --- a/app/dashboard/admin/ban/page.tsx +++ b/app/dashboard/admin/ban/page.tsx @@ -372,4 +372,4 @@ export default function AdminBanPage() { ); -} +} \ No newline at end of file diff --git a/components/layout/nav-item.tsx b/components/layout/nav-item.tsx index efddf2a..b86672a 100644 --- a/components/layout/nav-item.tsx +++ b/components/layout/nav-item.tsx @@ -16,8 +16,14 @@ interface NavItemProps { export const NavItem: React.FC = ({ href, icon: Icon, children, onClick }) => { const pathname = usePathname() - // More precise active state detection - exact match or starts with href followed by / - const isActive = pathname === href || (href !== '/dashboard' && pathname?.startsWith(href + '/')) + // More precise active state detection: + // - Exact match: pathname === href + // - Sub-path match: pathname starts with href + '/' (but exclude /dashboard and /dashboard/admin from matching sub-paths) + const isExactMatch = pathname === href + const isSubPathMatch = pathname?.startsWith(href + '/') + // Exclude parent routes that should only match exactly + const shouldOnlyMatchExactly = href === '/dashboard' || href === '/dashboard/admin' + const isActive = isExactMatch || (isSubPathMatch && !shouldOnlyMatchExactly) const isNavigatingRef = useRef(false) const handleClick = (e: React.MouseEvent) => {