app.py

import streamlit as st

# Looking at the UCSF example, they use a custom component approach with specific CSS
# Let's implement a similar solution

# Custom CSS based on the UCSF implementation
st.markdown("""
<style>
    /* CSS similar to UCSF implementation */
    div.block-container {
        padding-top: 1rem;
    }
    
    div[data-testid="stDecoratedAppViewContainer"] > div:first-child {
        position: sticky !important;
        top: 0 !important;
        background-color: white;
        z-index: 999;
        padding: 0px !important;
    }
    
    /* Custom header styling */
    .custom-header {
        background-color: #90EE90;
        padding: 1rem;
        border-bottom: 1px solid #ddd;
        width: 100%;
    }
    
    /* Hide default Streamlit header */
    header[data-testid="stHeader"] {
        display: none;
    }
    
    /* Additional fixes specific to Hugging Face embedding */
    section[data-testid="stSidebar"] {
        z-index: 0;
    }
</style>
""", unsafe_allow_html=True)

# Create a custom header at the very top (this is key)
# This must be the very first Streamlit element
with st.container():
    st.markdown('<div class="custom-header">', unsafe_allow_html=True)
    col1, col2 = st.columns([1, 9])
    
    with col1:
        # Add logo
        try:
            st.image("images/menu_book_60dp_75FBFD.png", width=60)
        except:
            st.write("📚")  # Fallback emoji if image doesn't load
            
    with col2:
        st.markdown("""
        <h2 style="margin: 0; padding: 0;">Map descriptions to SBS codes with Sentence Transformer + Reasoning</h2>
        <p style="margin: 0; padding: 0;">Select specific Chapter for quicker results</p>
        """, unsafe_allow_html=True)
    
    st.markdown('</div>', unsafe_allow_html=True)

# Add a bit of spacing
st.write("")

# Sidebar content (similar to your original code)
st.sidebar.header("SBS V2.0 mapper")
st.sidebar.write("(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
pg = st.navigation(pages=[type_text_page])
pg.run()

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

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

# --- Your Streamlit App ---
st.title("Map descriptions to SBS codes with Sentence Transformer + Reasoning")
st.subheader("Select specific Chapter for quicker results")
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")

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