Skip to content

Conversation

moshfiqrony
Copy link

@moshfiqrony moshfiqrony commented Aug 27, 2025

Description

Changed current prop from currentItem?.href === item.href to activeUrl === item.href to simplify navigation state logic and ensure current item highlighting is based on the actual active URL rather than the locally tracked currentItem state. The currentItem is a state and only gets updated for the details element onToggle event. Which assure that we will not have the updated activeItem in the currentItem

Type of change

  • Used the activeUrl instead of currentItem?.href for active item calculation

Testing

Click on a sidebar item that doesn't have nested items it will not become active. With the change it will solve the issue

We could also add an useEffect to update the currentItem using the updated activeItem. But in the nested sidebar item it is clear that we are using activeUrl directly for calculating current prop. Also from the implementation I feel the use of currentItem is to decide which item is collapsed or expanded.

<NavItemBase
    href={childItem.href}
    badge={childItem.badge}
    type="collapsible-child"
    current={activeUrl === childItem.href}
>
    {childItem.label}
</NavItemBase>

…tate

Changed current prop from `currentItem?.href === item.href` to 
`activeUrl === item.href` to simplify navigation state logic and 
ensure current item highlighting is based on the actual active URL 
rather than the locally tracked currentItem state.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant