How can a resusable LeftNav menu see a reusable header's state?

Hi gang. This is probably a rookie question, but I’m stumped…

I have a reusable left nav that appears on every page. Similarly, I have a header that appears on every page. I’d like to have a hamburger/menu icon in the top left corner (of the header) and use it to toggle visibility of the LeftNav. How do I do this?

I created a custom event on my LeftNav to toggle the whole thing. But from the Header, when I select “Trigger a custom event on a reusable element,” I do not see my LeftNav as a choice.

Similarly, I can set a custom state on my hamburger icon in the header, but the LeftNav can’t seem to see that custom state to respond to.

What am I missing? Thanks!

Hello @ThatFizzGuy

Seems that your reusable is placed directly on the page.

Try placing it on another group … or even better … a floating group since this is a left nav menu.

Then … toggle the floater as needed :smiley:

Thanks @cmarchan but I’m not sure I follow. If I’m thinking about it the right way, there are 3 pieces to the puzzle here:
1 - the reusable left nav menu (ideally available on every page)
2 - the reusable header (ideally atop every page)
3 - whichever page I’m working on, where both reusable elements are included

Your suggestion seems to focus on part 3, but don’t I need to get 1 and 2 to talk to/see each other directly first? Isn’t 3 somewhat irrelevant in other words? Or does placing 1 and 2 on each page as you described, in their own floating groups, somehow light up/enable that direct communication between 1 and 2?

Thanks again!

You can’t refer to a RE from within another RE (unless the second RE is contained within the second RE - which might be your solution here, but it depends on your exact use case).

Otherwise you’ll have to set some custom states on the page, then use those to show and hide your REs.

1 Like

Hello @ThatFizzGuy

Complementing @adamhholmes great advice.

Two things:

  1. Visualization. Placing REs onto FGs or groups … allows you to toggle on/off their visibility. You could also do this to the RE directly… But in the situation that you kindly described I opted to suggest placing it onto a floater.

  2. Communicating with the reusable.

Three ways:

A. Custom states
B. Custom events
C. Url parameters

Hope this helps a bit :smiley:

thanks @adamhholmes . Would you perhaps be able to give a quick example of how custom states can be leveraged here? I can’t figure out where to set one that can be seen by page AND header AND leftnav. If it’s on the page, the header and leftnav can’t see it. If it’s on the header, the leftnav can’t see it, etc. Thanks!

You just need to add a conditional workflow on the page to ‘read’ the custom state values from within the reusable elements…

Here’s a really basic example of a page with two reusable elements (a header and a side menu), where an icon in the reusable header is causing the reusable side menu to show or hide:

Reusable Header/Side Menu Page

1 Like

@adamhholmes you are a gentleman and a scholar, sir. Thank you! Now I get it. :slight_smile:

1 Like