From 0247f1edd8bd68b073439d14968ef8d1b3df7573 Mon Sep 17 00:00:00 2001 From: Dwindi Ramadhana Date: Fri, 26 Dec 2025 23:05:22 +0700 Subject: [PATCH] fix: Submenu active state - use exact pathname match only MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Problem: ALL submenu items showed active at once (screenshot evidence) Root Cause: Complex logic with exact flag and startsWith() was broken - startsWith logic caused multiple matches - exact flag handling was inconsistent Solution: Simplified to exact pathname match ONLY - isActive = it.path === pathname - No more startsWith, no more exact flag complexity - One pathname = one active submenu item Result: Only the current submenu item shows active ✅ Files Modified: - admin-spa/src/components/nav/SubmenuBar.tsx (simplified logic) - admin-spa/dist/app.js (rebuilt) --- admin-spa/src/components/nav/SubmenuBar.tsx | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/admin-spa/src/components/nav/SubmenuBar.tsx b/admin-spa/src/components/nav/SubmenuBar.tsx index bfce836..2518272 100644 --- a/admin-spa/src/components/nav/SubmenuBar.tsx +++ b/admin-spa/src/components/nav/SubmenuBar.tsx @@ -26,16 +26,10 @@ export default function SubmenuBar({ items = [], fullscreen = false, headerVisib
{items.map((it) => { const key = `${it.label}-${it.path || it.href}`; - // Exact match for submenu items, or match with sub-paths (e.g., /settings/notifications matches /settings/notifications/staff) - // Special handling: if item has exact flag, only match exact path - let isActive = false; - if (it.path) { - if (it.exact) { - isActive = pathname === it.path; - } else { - isActive = pathname === it.path || pathname.startsWith(it.path + '/'); - } - } + // Determine active state based on exact pathname match + // Only ONE submenu item should be active at a time + const isActive = it.path === pathname; + const cls = [ 'ui-ctrl inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 border text-sm whitespace-nowrap', 'focus:outline-none focus:ring-0 focus:shadow-none',