Update app.py

app.py

@@ -1,99 +1,80 @@
-import streamlit as st
-
-# --- Page Configuration ---
-# This configures the topmost header bar (which WILL now be sticky)
-st.set_page_config(
-    page_title="SBS V2.0 mapper", # This title appears in the sticky topmost bar
-    # Use the logo image here if you want it in the header (optional)
-    # page_icon="images/menu_book_60dp_75FBFD.png", # Icon for the sticky topmost bar
-    layout="wide" # Optional: Use wide layout
-)
-
-# --- Custom CSS to Fix Parent Overflow and Make the TOPMOST Header Bar Sticky ---
-st.markdown("""
+import streamlit as st 
+
+# 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")
+HEADER_SELECTOR = 'header[data-testid="stHeader"]'
+
+# ---- SELECTOR FOR THE MAIN CONTENT AREA THAT NEEDS PADDING ----
+# Target the first direct div child of the stAppViewContainer which often holds the main scrollable content 
+MAIN_CONTENT_SELECTOR = 'section[data-testid="stMain"]'
+#MAIN_CONTENT_SELECTOR = 'section[data-testid="stMain"] > div:nth-child(1)'
+#MAIN_CONTENT_SELECTOR = 'section[data-testid="stMainBlockContainer"]'
+#MAIN_CONTENT_SELECTOR = 'section[data-testid="stAppViewContainer"]'
+#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>
-    /* Target the main app container and ensure its overflow is visible */
-    /* This is crucial for sticky positioning relative to the iframe's viewport */
-    [data-testid="stApp"] {
-        overflow: visible !important; /* Force overflow to be visible */
-    }
-
-    /* Target the default Streamlit TOPMOST header bar (the <header> tag) */
-    header {
-        position: sticky !important; /* Make this specific bar sticky */
-        top: 0px !important;         /* Stick to the top edge of the iframe's viewport */
-        z-index: 999 !important;     /* Ensure it's always on top */
-        background-color: rgb(255, 255, 255) !important; /* Background for the sticky bar (white or match default) */
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add shadow */
-        height: auto !important; /* Force height to adjust based on content */
-        overflow: visible !important; /* Ensure content inside header is visible */
-    }
-
-    /* Ensure the container holding the Toolbar (stToolbar) and Status Widget (stStatusWidget) is NOT sticky */
-    /* This is typically the second direct child div within the stAppViewContainer */
-    [data-testid="stAppViewContainer"] > div:nth-child(2) {
-         position: static !important; /* Ensure it's not sticky or fixed */
-         top: auto !important;        /* Reset top positioning */
-         z-index: auto !important;    /* Reset z-index */
-         /* Remove any background or shadow rules that were applied here if necessary */
-    }
-
-
-    /* Add padding to the main content area to prevent it from starting behind the sticky TOPMOST header bar */
-    /* Adjust this value to be slightly more than the height of the TOPMOST header bar (the sticky element) */
-    /* You will likely need to inspect the deployed app to find the exact height of the <header> */
-    [data-testid="stAppViewContainer"] {
-        padding-top: 60px; /* Estimate height of the topmost sticky bar (~60px). Adjust after inspection. */
-    }
-
-    /* Adjust padding for the sidebar content as well */
-    /* This needs to account only for the height of the sticky topmost bar plus default sidebar padding */
-     [data-testid="stSidebar"] {
-         /* Estimate height of topmost bar (~60px) + default sidebar padding (~1rem, which is approx 16px) */
-         padding-top: calc(60px + 1rem); /* Adjust pixel value 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 */
-    }
-
+    /* 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); */
+        /*.reportview-container .main .block-container{{ */
+        /*    padding-top: 0rem; */
+        /* }} */
+    }}
+
+    /* Adding padding to the main content area to prevent overlap with the sticky header */
+    {MAIN_CONTENT_SELECTOR} {{
+        padding-top: 10px !important; /* {HEADER_HEIGHT} !important; */
+        /* background-color: yellow !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>
-""", unsafe_allow_html=True)
+"""
 
-# --- App Content (will scroll below the sticky TOPMOST bar) ---
+# Inject CSS as early as possible in your app
+st.markdown(custom_css, unsafe_allow_html=True)
 
-# The st.logo call here will place the logo in the sidebar or main body,
-# not in either of the top bars. If you want a logo in the sticky header,
-# use the page_icon parameter in st.set_page_config above.
-st.logo(image="images/menu_book_60dp_75FBFD.png")
+# --- 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.logo(image="images/menu_book_60dp_75FBFD.png")
+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")
 
-# Note: st.title and st.subheader here will appear *below* the sticky topmost bar,
-# as they are part of the main app content flow. The title in the sticky topmost bar
-# comes from st.set_page_config.
-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}")
+##pg = st.navigation({"Chapter_Index": [start_page], "Demo": [type_text_page, upload_file_page], "About": [about_page]}) # WITH SECTIONS
+pg.run()