app.py

import streamlit as st 

# Set page config
st.set_page_config(page_title="Fixed Status Widget", layout="wide")

# CSS to specifically target the status widget and make it sticky
st.markdown("""
<style>
    /* Target the status widget container */
    [data-testid="stStatusWidget"] {
        position: fixed !important;
        top: 0px;
        z-index: 1000000;
        width: auto;
        right: 0px;
        background-color: white;
        padding: 4px;
        border-bottom-left-radius: 4px;
        box-shadow: 0 0 4px rgba(0,0,0,0.1);
    }
    
    /* Add padding to the top of the main content */
    .main .block-container {
        padding-top: 2rem;
    }
</style>
""", unsafe_allow_html=True)

# Your regular Streamlit app content
st.title("App with Fixed Status Widget")

# Add sample content to demonstrate scrolling
st.write("Scroll down to see the status widget remain fixed at the top")

# Generate content to enable scrolling
for i in range(30):
    st.write(f"Content line {i}")
    if i % 5 == 0:
        st.markdown("---")


# --- SHARED ON ALL PAGES ---
st.logo(image="images/menu_book_60dp_75FBFD.png")
st.sidebar.title("SBS V2.0 mapper")
st.sidebar.subheader("(work in progress)")
st.sidebar.text("Demo by JA-RAD")

# --- PAGE SETUP ---
type_text_page = st.Page(
    page="pages/type_text.py",
    title="DEMO (work in progress)",
    icon=":material/keyboard:",
    default=True,)

# --- NAVIGATION SETUP ---
pg = st.navigation(pages=[type_text_page]) # WITHOUT SECTIONS
#pg = st.navigation({"Chapter_Index": [start_page], "Demo": [type_text_page, upload_file_page], "About": [about_page]}) # WITH SECTIONS
pg.run()