I have 2 reusable element on a single page, which are header and sidebar.
When I click an icon on the header, the sidebar will appear, after that, if I click a close icon on the sidebar, it will dissapear.
How can I implement this as smooth as possible?
How many other pages of your app are you using the sidebar reusable element?
The top bar could have an exposed state called open that starts by being false.
The side bar could have a prop called “open”. The value that you would feed into that prop would be the state exposed by the top bar.
In the top bar, you would have a workflow that switch is false to true and then back to false.
In the sidebar you could have a workflow that is “when true” flow. The workflow condition would be when “open is true”. And you would change it from “just once” to “always”
This is just one approach. Url params are pretty boss too
1 Like
almost every page ( >20 )
If you are using the sidebar on almost every page, without knowing more about the app, I’d imagine it might be better built as an SPA. I’ve rarely seen a need for a sidebar menu that is materially different from menus that can be in the header itself to be on every page for apps that are not SPA.
Either way @jared.gibb provided some good ideas on how to achieve the functionality of allowing one reusable element to control the visibility of another reusable element.
Of the two suggestions, in your situation I would see the URL parameters as a better solution, since, if the user opens the side bar menu on Page A and then navigates to Page B, they likely want to see that side bar menu open still, and the custom states approach would not allow for that, but the URL parameter approach would allow for that.
Also, since the sidebar is used on almost all pages, you could also just put the sidebar into the header reusable element, instead of keeping them separate.
1 Like
This topic was automatically closed after 70 days. New replies are no longer allowed.