Hi all,
I’m working on a design system and trying to create an interactive side navigation menu using component variants + a shared variable (selectedItem). Each nav item has two variants: default and selected.

Here’s what I’ve set up:

1. Each menu item has a label property (e.g., "Dashboard", "Settings", etc.)

2. On click, the interaction sets the variable: selectedItem = "Settings"

3. Then I added conditional logic:
    • If selectedItem == "Settings" → switch to selected
    • Else → switch to default

Goal: When one nav item is selected, all other items should revert to default – only one selected item at a time.

Issue: Only the clicked item changes. The rest don’t respond to the variable update.
I even tried using While value of variable changes or placing the logic in each item’s On Click – still not getting the expected behavior.

What am I missing? How can I ensure all nav items reactively update based on the selectedItem variable?

This is for a reusable side nav component in my design system, so it needs to be scalable.
Any guidance, working examples, or best practices would be super helpful.