app.py

import streamlit as st 

import time

# --- Custom CSS ---
# !!! IMPORTANT !!!
# 1. YOU MUST VERIFY AND ADJUST THE SELECTORS BELOW USING YOUR BROWSER'S INSPECTOR.
# 2. THE HEADER_HEIGHT MUST ACCURATELY REFLECT YOUR HEADER'S ACTUAL HEIGHT.

# Use the developer tools to find your header's actual height.
# Inspect the header element, go to the "Computed" tab in styles, and find its height.
HEADER_HEIGHT = "60px"  # EXAMPLE: Adjust this (e.g., "56px", "4rem")

# ---- SELECTOR FOR THE HEADER ----
# Try this first (common for recent Streamlit versions):
HEADER_SELECTOR = 'header[data-testid="stHeader"]'
# If that doesn't work, inspect and find the correct one.
# It might be just 'header', or a div with a specific class.
# Example if using a class: HEADER_SELECTOR = 'div.my-custom-looking-header-class'

# ---- SELECTOR FOR THE MAIN CONTENT AREA THAT NEEDS PADDING ----
# This targets the first direct div child of the stAppViewContainer,
# which often holds the main scrollable content.
#MAIN_CONTENT_SELECTOR = 'section[data-testid="stAppViewContainer"] > div:nth-child(1)'
# Alternative if the above doesn't work or if your content is further nested:
#MAIN_CONTENT_SELECTOR = 'section[data-testid="stAppViewContainer"] .main-content-wrapper-class'
# Or, very commonly, Streamlit wraps main content in a div with class "block-container":
MAIN_CONTENT_SELECTOR = 'section[data-testid="stAppViewContainer"] .block-container'
# MAIN_CONTENT_SELECTOR = '.main .block-container' # A more general selector for block-container

custom_css = f"""
<style>
    /* Making the Streamlit header sticky */
    {HEADER_SELECTOR} {{
        position: -webkit-sticky !important; /* For Safari */
        position: sticky !important;
        top: 0 !important;
        z-index: 9999 !important; /* Very high z-index */
        background-color: #90EE90 !important; /* Or your app's header background color */
        /* Add a subtle shadow to make it feel more distinct when content scrolls under */
        /* box-shadow: 0 2px 4px -1px rgba(0,0,0,0.1); */
    }}

    /* Adding padding to the main content area to prevent overlap with the sticky header */
    {MAIN_CONTENT_SELECTOR} {{
        padding-top: {HEADER_HEIGHT} !important;
        background-color: red !important;
        border-style: solid !important;
        border-color: red !important;
    }}

    /* Optional: If your app is set to wide mode and the header isn't spanning full width */
    /* This might be needed if the sticky positioning affects its width calculation. */
    /*
    {HEADER_SELECTOR} {{
        width: 100% !important;
    }}
    */
</style>
"""

# Inject CSS as early as possible in your app
st.markdown(custom_css, unsafe_allow_html=True)

# --- Your Streamlit App ---
st.title("App with Attempted Sticky Header")
st.sidebar.header("Sidebar")
st.sidebar.write("Sidebar content here.")

st.header("Main Content Section")
st.write(f"The header should be sticky. This content section has a top padding of approximately {HEADER_HEIGHT} to compensate for the header.")
st.info(f"Header Selector Used: `{HEADER_SELECTOR}`")
st.info(f"Main Content Selector Used: `{MAIN_CONTENT_SELECTOR}`")


if st.button("Run Process (for status widget)"):
    with st.spinner("Processing..."):
        time.sleep(2)
    st.success("Process finished!")

for i in range(60):
    st.write(f"Scrollable line of content {i + 1}.")

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