Removing sidebar faster

Custom Components
1

Hello, to remove the sidebar, I currently use

st.set_page_config(
	page_title=title,
	initial_sidebar_state="collapsed",
	page_icon=icon,
)

It works very often. However, it sometimes hangs and the sidebar is visible for about 4 seconds. Can anyone explain why it sometimes takes so long? I don’t want the user to be able to click on the side bar and 4 seconds is too long.

1 Like
2

Hi @endsley

Is this a multi page app, otherwise if no elements were assigned to the sidebar (e.g. via st.sidebar.write()) it should not be displayed.

Another way is to customize the CSS so that the sidebar is hidden permanently. Check out the following YouTube video for a walkthrough on how to implement this:

Best regards,
Chanin

3

Hello

Thank you for the response. Yes, it is a multipage site. However, I want to control the flow of the page switch, so I don’t want users to be able to jump to a random page.

After looking through your video, I get that I can write a CSS file, use the CSS to disable the sidebar element, and load the CSS file in the code.

The issue that I have is the element name of the div. Since it only appears for 3 seconds, i can’t seem to find it. Should it still be there in the code? After I disable it?

4

If you put the CSS selector at the beginning, does it still take long to hide the sidebar?

st.markdown(
    """
    <style>
    [data-testid="stSidebar"]{
        visibility: hidden;
    }
    </style>
    """, 
    unsafe_allow_html=True
)

That would be [data-testid="stSidebar"].

5

Hey @endsley, :wave:

There are some new updates on this with the latest release! As of 1.30.0, you can now program page switching with st.switch_page() as well as disable the sidebar navigation. :partying_face:

More info in the docs. Looking forward to hearing what you think!

6

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.