How to achieve persisting overlay object

[Blessed Logic]

I'm using XD to design a website that has a hamburger icon on the top left corner.  Clicking on this hamburger icon will open a left navigation sidebar.  I'm using XD's prototype overlay function to accomplish this to a certain degree.  I am unable to accomplish the following:

1.  I'd like for the left navigation sidebar to be visible by default when first entering into the site.  It is currently invisible by default and I have to click on the hambuger icon to make it visible.

2.  I'd like for the visibility of the left navigation sidebar to persist throughout the site where clicking on the hamburger icon effectively toggles the sidebar visibility on/off globally.  Currently, everytime I go to a new page, the sidebar is invisible and I have to click on the hamburger icon again to make it visible.

Is there any way to accomplish the two issues above?  Thanks!

{Renamed By MOD}

[Joely]

Hi,

1. Place the navigation ON the artboard, not only on click/trigger. Another way would be Components with states: Like open/closed.

2. As mentionned, use Components

https://www.adobe.com/products/xd/learn/prototype/component-states/use-auto-animate-and-component-st...

[Rishabh_Tiwari]

Hi there,

Thanks for reaching out. I found a similar discussion on the community, which you can refer to here: https://community.adobe.com/t5/adobe-xd/how-to-set-up-prototype-to-close-the-side-bar/m-p/11745064#M...

Let us know if this helps or if you need any further assistance.

Regards

Rishabh

[Chris W. Griffith · Accepted solution]

The Sidebar should become a component, this will allow for easier reuse across your prototype. Also, by doing so, you can the set its state. In your case, you will want it to default to 'open'.  To make it easier, you might design it in reverse with the menu open, then you won't have to keep changing its state from artboard to artboard.