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?
