search

gabrieltempass / streamlit-navigation-bar

A component that allows you to place a navigation bar in your Streamlit app.
https://streamlit.io/
MIT License
135 stars 14 forks source link

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

Open ryantenerowicz opened 2 months ago

ryantenerowicz commented 2 months ago

Checklist

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.

https://github.com/user-attachments/assets/051dc048-73dd-4861-a912-3003b6565bcc

Is this a regression?

Debug info

Additional information

No response

iagofabretti commented 1 month ago

I have the same problem

50698948 commented 1 month ago

I have the same issue when using streamlit 1.38 version.

rikonaka commented 1 month ago

I have the same issue when using streamlit 1.39.0 version. And I found that streamlit support native navigation bar now https://docs.streamlit.io/develop/api-reference/navigation/st.navigation .

ryantenerowicz commented 3 weeks ago

Thanks @hansthen for the fix! @gabrieltempass if you have the change to merge this to main it would be a huge help!

Thanks again for making this component has been so helpful.

hansthen commented 3 weeks ago

I made a new package streamlit-community-navigation-bar on pypi. This contains the latest fixes. It is hosted on github under the streamlit-community organization. I hope this can become a place where abandoned streamlit components can be salvaged.

ryantenerowicz commented 2 weeks ago

@hansthen would you mind sending the link? I can't seem to find it. Thanks!

hansthen commented 2 weeks ago

@hansthen would you mind sending the link? I can't seem to find it. Thanks!

pip install streamlit-community-navigation-bar works for me.

https://pypi.org/project/streamlit-community-navigation-bar/

Github repo is here: https://github.com/streamlit-community/streamlit-navigation-bar. If you want to volunteer I can send you an invitation to join the organization.

ryantenerowicz commented 2 weeks ago

Happy to volunteer! @hansthen

mateusamp commented 3 days ago

There is also another problem that the vertical space between the top of the sidebar and its content is too big. @hansthen fixed the problem of expanding the bar, but the spacing problem persists.

hansthen commented 1 day ago

There is also another problem that the vertical space between the top of the sidebar and its content is too big. @hansthen fixed the problem of expanding the bar, but the spacing problem persists.

@mateusamp if you make an issue in https://github.com/streamlit-community/streamlit-navigation-bar I can fix it in the other package.