Toggle hide/show sidebar from Python

[lucasrla]

Is there a way to hide/show (toggle) the sidebar from Python?

I am aware that there is initial_sidebar_state in set_page_config (currently beta_set_page_config), but what I would like to do is different.

I want to hide the sidebar from users initially and only show it when “necessary” for the app. My overarching goal is to hide unnecessary complexity from end users (and also nudge the ones who might want / need the complexity about where to find it).

Thanks!

[Pratap517]

im looking for the Answer

[pascalo]

I am also interested in this feature,
are there any ways to close the sidebar programmatically?

The goal is to have the sidebar open at the beginning as it is where the user can select some option.
But then automatically fold the sidebar so that the user can have a “full screen” experience on.

Above is my demo app sidebar divided into different “pages” and including a SessionState module so when user connects to the application, they first access a streamlit form to authenticate to the App on my backend database:
Once they are logged in properly they will automatically land on the Welcome page and the sidebar will be expanded.

Next if the user selects for example “Market Overview” module, I would like to automatically hide/close the sidebar at this stage. So the user doesn’t have to manually close it and can have a full screen experience of the module

[fcastell]

+1 looking forward to have this

[Chandra_Halim]

I am also looking for this feature, then I do a little tricks with javascript and streamlit markdown to accomplish it.

If you inspect the hide/show button, you will be found the class “css-1ydp377 edgvbvh6”. But it has 3 element as mentioned below.

The first refer to hamburger menu, the other refer to the show/hide sidebar button (it will be toggling so it doesn’t matter you choose 2nd or 3rd element)

To do this I embed an image within a tag to run the javascript as below.

st.markdown('''
    <a href="javascript:document.getElementsByClassName('css-1ydp377 edgvbvh6')[1].click();">
        <img src="https://i.ibb.co/yP2wjhW/jaka-02.png" alt="Logo JAKA" style="width:50px;height:50px;"/>
    </a>
    ''', unsafe_allow_html=True)

Then it will works like this,

Thanks, hopefully it helps you

[franasa]

@pascalo

The goal is to have the sidebar open at the beginning as it is where the user can select some option.
But then automatically fold the sidebar so that the user can have a “full screen” experience on.

upvote for this feature!

[asehmi]

In Streamlit v1.11.0 the element ids are <a href="javascript:document.getElementsByClassName('css-9s5bis edgvbvh3')[1].click();" target="_self">. I had to use " target="_self" to get around pop up shields.

[marduk]

FYI, for anyone still looking for how to toggle the sidebar state programmatically, see below a simple example (works for me on Streamlit 1.11.1):

import streamlit as st

# Initialize a session state variable that tracks the sidebar state (either 'expanded' or 'collapsed').
if 'sidebar_state' not in st.session_state:
    st.session_state.sidebar_state = 'expanded'

# Streamlit set_page_config method has a 'initial_sidebar_state' argument that controls sidebar state.
st.set_page_config(initial_sidebar_state=st.session_state.sidebar_state)

# Show title and description of the app.
st.title('Example: Controlling sidebar programmatically')
st.sidebar.markdown('This is an example Streamlit app to show how to expand and collapse the sidebar programmatically.')

# Toggle sidebar state between 'expanded' and 'collapsed'.
if st.button('Click to toggle sidebar state'):
    st.session_state.sidebar_state = 'collapsed' if st.session_state.sidebar_state == 'expanded' else 'expanded'
    # Force an app rerun after switching the sidebar state.
    st.experimental_rerun()

[Soham_Agarwal]

This worked, thanks!