How to achieve "active page" with variables

I’m making a prototype with a list of navigational links. When a link is selected I’m using variables to swap the page content using a “currentPage” variable which maps to a “Pages” component where each variant is a page with different content (i.e. Home, About, etc). The trouble is making the selected nav item have an “active” state (like say changing the color).

When I click “About” let’s say I would like that tab to be active. When I go back Home I want About to no longer be active and Home to be active. Because you can jump to other pages from links, the footer, etc I figured variables would be the best way to swap the content of the pages. That works wonderfully and has cut my prototyping screens way down.

The issue is I originally tried to set a boolean for each nav item where "currentPage == “About” for about “currentPage == Home” for home etc. But I realized this isn’t rechecked every time currentPage changes and therefore doesnt work.

Currently, as a workaround, i have a homeIsActive, aboutIsActive, etc but this is a huge pain since for every navigational item on the page (inline links, buttons, footer, etc) I have to set like aboutIsActive = true, homeIsActive = false, etc for every page.

Is there a way for boolean values to be rechecked when variables changed so it re-runs?

Or is there another/better/right way of doing this?


Ever find a practical solution to this?

Sadly @JoeM, no. As the pages grow too the variables are becoming unwieldly and even somewhat buggy. I uncovered at least one bug that Figma acknowledged. I wish there was a way that variables could be rechecked with state changes or var updates rather than just on render.