Tailwind-style sidebars, where the sidebar collapses to display only icons and expands again when clicked

Using Streamlit
1

Hi!
I am working on a project using st.sidebar and encountered an issue related to managing the sidebar’s state when using the built-in toggle button for opening and closing it.

Details:

  1. The st.sidebar modifies the aria-expanded attribute (true/false) when the built-in toggle button is clicked.
  2. I aim to control the display in different states:
  • When aria-expanded="true", I want the sidebar to be fully expanded (showing both text and icons).
  • When aria-expanded="false", I want the sidebar to remain visible but display only icons, similar to a Tailwind-style sidebar where it collapses to icons and expands again when clicked.
  1. I have tried using custom CSS and JavaScript embedded via st.markdown to control this behavior. However, it seems the dynamic behavior of Streamlit either overrides the classes or does not respond as expected.

My questions are:

  1. Is there a built-in way in Streamlit to control the sidebar’s behavior in the different aria-expanded states?
  2. Is it possible to add an intermediate (collapsed) view for the sidebar where only icons are displayed, instead of fully closing it?
  3. Does Streamlit officially support such modifications using CSS or JavaScript, and if so, what is the recommended approach to achieve this?

I am looking for functionality similar to Tailwind-style sidebars, where the sidebar collapses to display only icons and expands again when clicked.

Thanks in advance!