Unable to click the buttons

Community Cloud
, ,
1

Hey, I’ve the following application where I am using the st_bridge and it’s working fine locally, but when I push it to the streamlit it is changing the page on button click. Anyone can help?

import streamlit as st
from st_bridge import bridge, html
from introduction import intro
from humanize import humanize_page

# Import the Material Icons font
st.markdown("""
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        .material-icons {
            font-size: 36px;
            vertical-align: middle;
        }
        .sidebar-button {
            display: flex;
            align-items: center;
            padding: 10px;
            margin: 5px;
            cursor: pointer;
            border-radius: 5px;
            background-color: #E1EDED;
            color: black;
        }
        .sidebar-button:hover {
            background-color: #e0e0e0;
        }
    </style>
""", unsafe_allow_html=True)


data = bridge("my-bridge", default="humanize")

# Define the sidebar button function
def sidebar_button(text, icon, key):
    button_html = f"""
        <div class="sidebar-button" onClick="stBridges.send('my-bridge', '{key}')")">
            <div style="margin-right: 10px;">
                <i class="material-icons">{icon}</i>
            </div>
            {text}
        </div>
    """
    return button_html

pages = {
    "intro": intro,
    "humanize": humanize_page,
}

# Add buttons to the sidebar
with st.sidebar:
    html(sidebar_button("Dashboard", "home", key="intro"))
    html(sidebar_button("Humanize Content", "bubble_chart", key="humanize"))
if data:
    pages[data]()
2

It seems like this may be a limitation of st_bridge Streamlit-bridge seems unresponsive in Streamlit cloud · Issue #7 · binh-vu/streamlit-bridge · GitHub

Have you tried using st.page_link (https://docs.streamlit.io/develop/api-reference/widgets/st.page_link) in the sidebar instead of custom html? Here’s an example of what you can do, and st.page_link now supports material icons for the page icon.

Here’s a simple example of how you can use it to set up your navigation want to configure my Streamlit application so that it starts with a specific page - #2 by blackary