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">
|
<div className="flex gap-2 overflow-x-auto no-scrollbar">
|
||||||
{items.map((it) => {
|
{items.map((it) => {
|
||||||
const key = `${it.label}-${it.path || it.href}`;
|
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)
|
// Determine active state based on exact pathname match
|
||||||
// Special handling: if item has exact flag, only match exact path
|
// Only ONE submenu item should be active at a time
|
||||||
let isActive = false;
|
const isActive = it.path === pathname;
|
||||||
if (it.path) {
|
|
||||||
if (it.exact) {
|
|
||||||
isActive = pathname === it.path;
|
|
||||||
} else {
|
|
||||||
isActive = pathname === it.path || pathname.startsWith(it.path + '/');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const cls = [
|
const cls = [
|
||||||
'ui-ctrl inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 border text-sm whitespace-nowrap',
|
'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',
|
'focus:outline-none focus:ring-0 focus:shadow-none',
|
||||||
|
|||||||
Reference in New Issue
Block a user