app.py

import streamlit as st 

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

# JavaScript approach to fix the status widget position
js_code = """
<script>
// Function to fix the position of the status widget
function fixStatusWidget() {
    // Try to find the status widget using different possible selectors
    const statusWidget = 
        document.querySelector('[data-testid="stStatusWidget"]') || 
        document.querySelector('.stStatusWidget') ||
        document.querySelector('button[kind="formSubmit"]').closest('div').closest('div');
    
    if (statusWidget) {
        // Set fixed positioning
        statusWidget.style.position = 'fixed';
        statusWidget.style.top = '10px';
        statusWidget.style.right = '10px';
        statusWidget.style.zIndex = '1000000';
        statusWidget.style.backgroundColor = 'white';
        statusWidget.style.borderRadius = '4px';
        statusWidget.style.boxShadow = '0 0 10px rgba(0,0,0,0.2)';
        statusWidget.style.padding = '4px';
        console.log('Status widget positioned successfully');
    } else {
        console.log('Status widget not found, will retry');
    }
}

// Try to fix the widget immediately
fixStatusWidget();

// Also run after a delay to make sure the DOM is fully loaded
setTimeout(fixStatusWidget, 1000);

// Continue checking periodically in case the widget gets recreated
setInterval(fixStatusWidget, 2000);
</script>
"""

# Inject the JavaScript
st.components.v1.html(js_code, height=0)

# Your regular Streamlit app content
st.title("App with JavaScript-Fixed Status Widget")
st.write("Scroll down to see if the status widget stays fixed")

# Generate content for scrolling test
for i in range(30):
    st.write(f"Testing content line {i}")
    if i % 10 == 0:
        st.markdown("### Section Break")

# --- 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()