Skip to content

st.sidebar expand button is not clickable with latest Streamlit version 1.38 #26

Open
@ryantenerowicz

Description

@ryantenerowicz

Checklist

  • I have searched the existing issues for similar issues.
  • I added a very descriptive title to this issue.
  • I have provided sufficient information below to help reproduce this issue.

Summary

After updating my environment to Streamlit 1.38. The st.sidebar button is no longer compatible with streamlet-navigation-bar, and cannot be clicked.

Reproducible code example

"""
Using streamlit==1.38.0
"""

import streamlit as st
from streamlit_navigation_bar import st_navbar

st.set_page_config(initial_sidebar_state='expanded')

page = st_navbar(pages=["Home", "Documentation", "Examples", "Community", "About"],
                 adjust=True,
                 options={'show_sidebar': True})
with st.sidebar:
    st.write('test')

st.write(page)

Steps to reproduce

  1. Update Streamlit to 1.38.0
  2. Run code provided.

Expected behavior

I expect that the sidebar can be expanded and collapsed via the sidebar button.

Current behavior

I tested it with versions <=1.37 and it works perfectly. The bug seems to come from the css styling done by streamlit-navigation-bar. I noticed in 1.38 Streamlit changed the data-testids of some of their components so that broke the CSS styling.

It looks like in the the streamlet-navigation-bar files are using div[data-testid="collapsedControl"] but now in 1.38, Streamlit changed the name of the sidebar button to div[data-testid="stSidebarCollapseButton"]. So I think updating the data-testid should fix the issue.

I attached a video of the bug as well.

sidebar_bug.mov

Is this a regression?

  • Yes, this used to work in a previous version.

Debug info

  • Streamlit version: 1.38
  • Streamlit Navigation Bar version: 3.3.0
  • Python version: 3.9.12
  • Operating System: MacOS
  • Browser: Safari

Additional information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions