app.py

import streamlit as st 

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

# CSS to fix the entire top toolbar
st.markdown("""
<style>
    /* Target the entire header/toolbar section */
    header[data-testid="stHeader"],
    header.css-18ni7ap.e8zbici2,
    .stApp > header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: auto !important;
        z-index: 999999 !important;
        background-color: white !important;
        box-shadow: 0 1px 5px rgba(0,0,0,0.1) !important;
    }
    
    /* Add padding to main content to prevent it being hidden under fixed header */
    .main .block-container {
        padding-top: 3rem !important;
    }
    
    /* Make sure status widget appears above other elements */
    [data-testid="stStatusWidget"] {
        z-index: 1000000 !important;
    }
</style>
""", unsafe_allow_html=True)

# Your regular Streamlit app content
st.title("App with Fixed Top Toolbar")
st.write("Scroll down to test if the toolbar and status widget stay fixed")

# Generate content for scrolling
for i in range(30):
    st.write(f"Testing 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()