g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve nav active state detection logic

Browse Source 
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.
This commit is contained in:
g
2025-11-30 00:29:57 +00:00
parent 785509fed9
commit 4ef0fd1a68
2 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/layout/nav-item.tsx
View File

@@ -16,8 +16,14 @@ interface NavItemProps {
export const NavItem: React.FC<NavItemProps> = ({ href, icon: Icon, children, onClick }) => { export const NavItem: React.FC<NavItemProps> = ({ href, icon: Icon, children, onClick }) => {
const pathname = usePathname() const pathname = usePathname()
// More precise active state detection - exact match or starts with href followed by / // More precise active state detection:
const isActive = pathname === href || (href !== '/dashboard' && pathname?.startsWith(href + '/')) // - 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 isNavigatingRef = useRef(false)
const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => { const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {