fix: Submenu active state - use exact pathname match only
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)
This commit is contained in:
@@ -26,16 +26,10 @@ export default function SubmenuBar({ items = [], fullscreen = false, headerVisib
|
||||
<div className="flex gap-2 overflow-x-auto no-scrollbar">
|
||||
{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',
|
||||
|
||||
Reference in New Issue
Block a user