No idea how to do this?

I’ve been trying to get a reusable element appears when an icon is clicked on another reusable element but I’m close to giving up.

I have this Navbar which is a reusable element on all of my pages and turns into a mobile navbar below a certain breakpoint. This menu-bar is supposed to appears when I click on the icon on the navbar but this is a reusable element too.


How can I do this?

Insert the second RE (menu-bar) inside the first RE’s development area (navbar), then configure WF to display the menu-bar inside the first RE’s workflow area. So both REs will be associated with each other.

Already tried this, when I put the “stacked” RE in my main pages, it just acts as a huge group in front of everything else (even where its supposed to be transparent) and block the click on anything below its Z level. It’s not a problem with just an horizontal navbar as a RE floating group because its just 50px height…

Create an RE just for the sidebar icon.

In it, insert the menu-bar and configure the WF to display the menu-bar, this way, you will have an RE, containing only the icon and the menu (invisible), it will probably be a Group Focus, already hidden by default.

Then insert this RE into the navbar RE, as in the example below.

You need to read up on how to interact with reusable elements. TD;lr, you need to create states on their outer-most group and read/write them that way.

Or get the Env variable plugin.