app.py

import streamlit as st

# --- Page Configuration ---
# This still configures the topmost header bar (which won't be sticky)
st.set_page_config(
    page_title="SBS V2.0 mapper", # This title appears in the topmost bar
    # page_icon="images/menu_book_60dp_75FBFD.png", # Icon for the topmost bar
    #layout="wide" # Optional: Use wide layout
)

# --- Custom CSS to Fix Parent Overflow and Make the Toolbar/Status Bar Sticky ---
st.markdown("""
<style>
    /* Target the main app container and ensure its overflow is visible */
    /* This is crucial for sticky positioning relative to the viewport */
    [data-testid="stApp"] {
        overflow: visible !important; /* Force overflow to be visible */
    }

    /* Target the container element that holds the Toolbar (stToolbar) and Status Widget (stStatusWidget) */
    /* Based on the likely Streamlit DOM structure, this is typically the second direct child div within stAppViewContainer */
    [data-testid="stAppViewContainer"] > div:nth-child(2) {
         position: sticky !important; /* Make this specific bar sticky */
         top: 0px !important;         /* Stick to the top edge of the viewport */
         z-index: 999 !important;     /* Ensure it's always on top */
         background-color: rgb(255, 255, 255) !important; /* Background for the sticky bar */
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add shadow */
         /* height: auto !important; */ /* Usually not needed here */
         /* overflow: visible !important; */ /* Usually not needed here */
    }

    /* Add padding to the main content area to prevent it from starting behind the sticky Toolbar/Status bar */
    /* Adjust this value to be slightly more than the height of the Toolbar/Status bar (the sticky element) */
    /* You will likely need to inspect the deployed app to find the exact height of this bar */
    [data-testid="stAppViewContainer"] {
        padding-top: 3.75rem; /* Estimate height of the second bar (~50px). Adjust after inspection. */
    }

    /* Adjust padding for the sidebar content as well */
    /* This needs to account for the height of both the topmost bar AND the sticky second bar */
     [data-testid="stSidebar"] {
         /* Estimate height of topmost bar (~40px) + height of sticky bar (~50px) + default sidebar padding (~1rem) */
         padding-top: calc(40px + 3.75rem + 1rem); /* Adjust pixel values after inspection */
     }

    /* Ensure the main content block within the container also has correct top padding */
    .main .block-container {
        padding-top: 1rem; /* Keep or adjust default Streamlit content padding */
    }


</style>
""", unsafe_allow_html=True)

# --- App Content (will scroll below the sticky SECOND bar) ---

# The st.logo call here will place the logo in the sidebar or main body,
# not in either of the top bars.
st.logo(image="images/menu_book_60dp_75FBFD.png")


st.sidebar.header("SBS V2.0 mapper")
st.sidebar.write("(work in progress)")
st.sidebar.text("Demo by JA-RAD")

# Note: st.title and st.subheader here will appear *below* the sticky second bar,
# as they are part of the main app content flow.
st.title("Map descriptions to SBS codes with Sentence Transformer + Reasoning") # This title scrolls
st.subheader("Select specific Chapter for quicker results") # This subheader scrolls


# --- NAVIGATION SETUP ---
# Keep your existing navigation setup
type_text_page = st.Page(
    page="pages/type_text.py",
    title="DEMO (work in progress)",
    icon=":material/keyboard:", # This icon can appear in the tab/bookmark
    default=True,
)

pg = st.navigation(pages=[type_text_page]) # WITHOUT SECTIONS
pg.run()

# Add some extra content to make the page scrollable for testing
# Remove this loop in your final application if you have enough content already
for i in range(100):
    st.write(f"This is scrollable content line {i}")