I am trying to set up a sidebar menu to help navigate my app with a reusable element. It was my understanding that I should be able to have a reusable element be available on any page of my app with consistent workflows. The issue I’m having is getting the reusable element to communicate with anything outside of itself.
I have big picture categories in the menu (Listings, People, About, etc) and sub categories under each, for example “favorites” under the Listings category. When clicked, “Listings” should navigate the user to the correct page in the app. I would like to allow the user to click on “Favorites” under the “Listings” category in order to navigate to a filtered/conditional view of the Listings page showing only favorited items.
On each page, I have set custom states to display the correct version of that page, in this example, only listings that have been added to the user’s list of favorites. This works for any buttons on the actual page, but I cannot reference the reusable element from the page or vice versa.
Is there a way for me to communicate a custom state set within a reusable element to also be reflected on the page it affects? If not, is there a better way to set up navigation like this that includes setting a state for page that is the subject of the navigation?
Thanks in advance for your help!