Update pages/type_text.py

pages/type_text.py

@@ -10,97 +10,141 @@ import os
 os.getenv("HF_TOKEN") 
 
 
-# 0. If stStatusWidget is a custom component, make sure it's defined or imported.
-# For demonstration, let's create a placeholder function for stStatusWidget.
-# Replace this with your actual stStatusWidget or the widgets you want to use.
-def stStatusWidget():
-    col1, col2, col3 = st.columns(3)
-    with col1:
-        st.metric("Temperature", "25 °C", "1.2 °C")
-    with col2:
-        st.metric("Humidity", "60%", "-5%")
-    with col3:
-        st.info("System Status: OK")
-
-# 1. Define the CSS for the sticky header
-# Note: The background color is important so content doesn't show through.
-# You might want to adjust it to match your Streamlit theme.
-# Streamlit's default light theme background is #f0f2f6 or white.
-# Streamlit's default dark theme background is #0e1117.
-# Using a generic white/light gray is often a safe bet.
-sticky_header_css = """
-<style>
-    div[data-testid="stVerticalBlock"] div:has(div.sticky-header) {
-        position: sticky;
-        top: 2.875rem; /* Adjust this value if you have a page icon or title taking up space */
-        background-color: white;
-        z-index: 999;
-        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1); /* Optional: for a slight shadow */
-        padding-bottom: 0.5rem; /* Optional: for some spacing */
-    }
-
-    .sticky-header {
-        /* You can add additional styling for the header itself if needed */
-        /* border-bottom: 1px solid #e6e6e6; */ /* Optional: a bottom border */
-    }
-
-    /* Nudge the actual page content down a bit if the sticky header is tall */
-    /* This is optional and depends on your header's height and content */
-    /*
-    div[data-testid="stAppViewContainer"] > section:first-of-type {
-        padding-top: 5rem; /* Adjust this based on your header's height */
-    }
-    */
-
-    /*
-    Alternative for top positioning if you want it absolutely at the top,
-    but this might conflict with Streamlit's own header bar if you're using st.set_page_config with a title/icon.
-    If you're not, or want to cover it, top: 0; might be better.
-    */
-    /*
-    div[data-testid="stVerticalBlock"] div:has(div.sticky-header) {
-        position: sticky;
-        top: 0; // Use this if you have no page title/icon in Streamlit's native header bar
-        background-color: white;
-        z-index: 999;
-    }
-    */
-</style>
+# --- PAGE CONFIG (Optional: Must be the first Streamlit command) ---
+# st.set_page_config(layout="wide") # Example: Use wide mode
+
+# --- NAVIGATION LOGIC ---
+# Initialize session state for page navigation if it doesn't exist
+if "page" not in st.session_state:
+    st.session_state.page = "Home"
+
+# Function to change the current page
+def set_page(page_name):
+    st.session_state.page = page_name
+
+# --- CSS FOR STICKY NAVBAR ---
+# You might need to adjust 'top' if Streamlit's default header is visible
+# and you want your navbar to be below it. Streamlit's header is approx 3rem-3.5rem.
+# If you've hidden Streamlit's default header, 'top: 0;' should work.
+# Let's assume Streamlit's default header IS visible for this example.
+STREAMLIT_DEFAULT_HEADER_HEIGHT = "3.5rem" # Approximate
+
+# Define the CSS for the sticky navbar
+# We will wrap our Streamlit columns/buttons in a div with class "sticky-navbar-container"
+navbar_style = f"""
+    <style>
+        .sticky-navbar-container {{
+            position: sticky;
+            top: {STREAMLIT_DEFAULT_HEADER_HEIGHT}; /* Stick below Streamlit's default header */
+            background-color: #FFFFFF; /* Or your app's background color e.g. #F0F2F6 */
+            z-index: 1001; /* High z-index to keep it on top */
+            padding: 0.75rem 1rem; /* Adjust padding as needed */
+            box-shadow: 0 2px 4px -1px rgba(0,0,0,0.1); /* Optional: subtle shadow */
+            border-bottom: 1px solid #E0E0E0; /* Optional: subtle border */
+            width: 100%; /* Ensure it spans the full width */
+        }}
+        /* Optional: Style for the buttons for a more 'navbar' look */
+        .sticky-navbar-container .stButton>button {{
+            border: none; /* Remove default button border */
+            padding: 0.5rem 1rem; /* Adjust button padding */
+            margin: 0 0.25rem; /* Spacing between buttons */
+            /* background-color: transparent; */ /* Make button background transparent */
+            /* color: #31333F; */ /* Set text color */
+            font-weight: 500;
+        }}
+        .sticky-navbar-container .stButton>button:hover {{
+            /* background-color: #E0E0E0; */ /* Hover effect */
+            /* color: #000000; */
+        }}
+        .sticky-navbar-container .stButton>button:focus {{
+            /* outline: 2px solid #007bff; */ /* Focus outline */
+            /* box-shadow: none; */
+        }}
+        /* Style for an active-like button (if you want to highlight current page) */
+        .sticky-navbar-container .stButton.active-button>button {{
+            /* background-color: #007bff; */
+            /* color: white; */
+            font-weight: bold;
+            border-bottom: 2px solid #007BFF; /* Example active indicator */
+        }}
+
+    </style>
 """
-st.markdown(sticky_header_css, unsafe_allow_html=True)
+st.markdown(navbar_style, unsafe_allow_html=True)
 
-# 2. Create the header content within a div that has the 'sticky-header' class.
-# We use st.markdown to open the div, then Streamlit widgets, then st.markdown to close.
+# --- NAVBAR HTML STRUCTURE ---
+# Start the div container for the navbar
+st.markdown('<div class="sticky-navbar-container">', unsafe_allow_html=True)
 
-st.markdown('<div class="sticky-header">', unsafe_allow_html=True)
+# Create columns for navigation items
+# Adjust the column ratios as needed, e.g., for a logo or app title
+nav_cols = st.columns([1, 1, 1, 1, 3]) # 4 nav items, 1 larger space for title/logo
 
-# --- Your Header Content ---
-# st.title("My Application Dashboard") # You can have a title
-# st.markdown("---") # Optional separator
+# Navigation buttons
+with nav_cols[0]:
+    # Add 'active-button' class conditionally for styling
+    active_class = "active-button" if st.session_state.page == "Home" else ""
+    if st.button("🏠 Home", on_click=set_page, args=("Home",), use_container_width=True, key="nav_home", type="secondary"): # type can be "primary" or "secondary"
+        pass # on_click handles the logic
+    # Applying class via JS hack (if needed, st.button doesn't directly support class attribute)
+    if active_class: st.markdown(f"<script>document.querySelector('[data-testid=\"stButton\"] button[key*=\"nav_home\"]').closest('.stButton').classList.add('{active_class}');</script>", unsafe_allow_html=True)
 
-# Example using columns for layout
-header_cols = st.columns([3, 2]) # Adjust ratios as needed
-with header_cols[0]:
-    st.subheader("Dashboard Overview 📊")
-    # You could put a logo here: st.image("logo.png", width=100)
-with header_cols[1]:
-    # Call your stStatusWidget or place its constituent widgets here
-    st.status(label="StatusIcon") # Our placeholder status widget
 
-st.markdown('</div>', unsafe_allow_html=True)
+with nav_cols[1]:
+    active_class = "active-button" if st.session_state.page == "Dashboard" else ""
+    if st.button("📈 Dashboard", on_click=set_page, args=("Dashboard",), use_container_width=True, key="nav_dashboard"):
+        pass
+    if active_class: st.markdown(f"<script>document.querySelector('[data-testid=\"stButton\"] button[key*=\"nav_dashboard\"]').closest('.stButton').classList.add('{active_class}');</script>", unsafe_allow_html=True)
 
-# 3. Add the rest of your page content to demonstrate scrolling
-st.markdown("## Main Content Area")
-st.write("Scroll down to see the header stick.")
 
-for i in range(50):
-    st.write(f"Dummy content line {i+1} to make the page scrollable.")
-    if (i+1) % 10 == 0:
-        st.image("https://streamlit.io/images/brand/streamlit-logo-secondary-colormark-darktext.png", width=300)
+with nav_cols[2]:
+    active_class = "active-button" if st.session_state.page == "Settings" else ""
+    if st.button("⚙️ Settings", on_click=set_page, args=("Settings",), use_container_width=True, key="nav_settings"):
+        pass
+    if active_class: st.markdown(f"<script>document.querySelector('[data-testid=\"stButton\"] button[key*=\"nav_settings\"]').closest('.stButton').classList.add('{active_class}');</script>", unsafe_allow_html=True)
 
-st.markdown("---")
-st.write("End of content.")
 
+with nav_cols[3]:
+    active_class = "active-button" if st.session_state.page == "About" else ""
+    if st.button("👤 About", on_click=set_page, args=("About",), use_container_width=True, key="nav_about"):
+        pass
+    if active_class: st.markdown(f"<script>document.querySelector('[data-testid=\"stButton\"] button[key*=\"nav_about\"]').closest('.stButton').classList.add('{active_class}');</script>", unsafe_allow_html=True)
+
+
+# Optional: App title or logo in the navbar
+with nav_cols[4]:
+    st.markdown("<h3 style='text-align:right; margin:0; padding-top:0.1rem;'>My Sticky App</h3>", unsafe_allow_html=True)
+
+# Close the div container for the navbar
+st.markdown('</div>', unsafe_allow_html=True)
+
+
+# --- MAIN PAGE CONTENT ---
+# Display content based on the selected page
+if st.session_state.page == "Home":
+    st.header("🏠 Home Page")
+    st.write("Welcome to the home page! This navbar will stick to the top as you scroll.")
+    for i in range(50):
+        st.write(f"Home: Scrollable content line {i+1}")
+elif st.session_state.page == "Dashboard":
+    st.header("📈 Dashboard")
+    st.write("This is your main dashboard. Notice the sticky navigation.")
+    for i in range(50):
+        st.write(f"Dashboard: Scrollable content line {i+1}")
+elif st.session_state.page == "Settings":
+    st.header("⚙️ Settings")
+    st.write("Configure your application settings here.")
+    for i in range(50):
+        st.write(f"Settings: Scrollable content line {i+1}")
+elif st.session_state.page == "About":
+    st.header("👤 About Us")
+    st.write("Information about this application and its sticky navigation feature.")
+    for i in range(50):
+        st.write(f"About: Scrollable content line {i+1}")
+
+# --- FOOTER (Example) ---
+st.markdown("---")
+st.write("This is the footer of the page.")