Toggle, hide sidebar

[Racchel]

Hi.

After select some options on the sidebar of my app, I have a button to make the prediction.

I would like to know if is there a way to toggle/hide the sidebar?

On mobile, that gets in the way of usability.

Thanks.

[Marisa_Smith]

Hey @Racchel!

Assuming I understood your question the solution is very easy. When you have the sidebar open there is a little “X” in the top right hand corner, this will collapse the sidebar so you can use the rest of your app! I attached a picture of what this looks like on a phone.

If you need to (or want to) open the sidebar again, there is an arrow in the top left corner after you have collapsed it that allows you to re-open the side bar.

Hopefully I have not misunderstood and this helps!
Happy Streamlit-ing!
Marisa

[SantiagoBF]

Good day,

I was wondering if there is any functionality to remove that X button, so that the sidebar always remains expanded and there is no way to hide it.

Thank you very much.

[Marisa_Smith]

Hi @SantiagoBF,

First welcome to the Streamlit community!

Currently, there is no built-in way to remove the “X” on the sidebar. But if this is a feature your looking for you can open a feature request on our github!

Issues · streamlit/streamlit

Happy Streamlit-ing!
Marisa

[Rushmore]

To hide it:

st.markdown("""

<style>


 .css-1iyw2u1 {
        display: none;
    }

</style>

"", unsafe_allow_html=True).

If this does not work, just right click on the button and find the css element of the button that has display:

Combine this with the below to finalise your question:

st.set_page_config(initial_sidebar_state=‘expanded’,)

[Chris1]

I would like to know whether there is any arguments that open and hide the sidebar.
The “X” and “>” buttons are pretty small, and hard to see on mobile.

I would like to make two buttons that one will open the sidebar and another one to hide the sidebar.

Thanks

[shawngiese]

Could you maybe use the streamlit_js_eval component like:

# close sidebar
js1 = """
var clickme = window.parent.document.querySelectorAll("button");
clickme[1].click();
"""

streamlit_js_eval(js_expressions=js1)