Update app.py

app.py

@@ -1,60 +1,89 @@
 import streamlit as st 
 
 # Set page config
-st.set_page_config(page_title="Multipage Navigation", layout="wide")
+st.set_page_config(page_title="Floating Navigation", layout="wide")
 
-# Use sidebar as a persistent navigation element (this is always visible)
-with st.sidebar:
-    st.title("My Application")
-    st.markdown("### Navigation")
-    
-    nav_option = st.radio(
-        "Go to:",
-        ["Section 1", "Section 2", "Section 3"],
-        key="nav_radio"
-    )
+# Create a session state for the navigation panel visibility
+if 'show_nav' not in st.session_state:
+    st.session_state.show_nav = False
+
+# Function to toggle navigation panel
+def toggle_nav():
+    st.session_state.show_nav = not st.session_state.show_nav
+
+# Add a floating action button style
+st.markdown("""
+<style>
+    .floating-button {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        background-color: #4CAF50;
+        color: white;
+        border-radius: 50%;
+        width: 60px;
+        height: 60px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 24px;
+        cursor: pointer;
+        z-index: 999;
+        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+    }
+</style>
+<div class="floating-button" onclick="document.getElementById('nav-toggle').click();">
+    ≡
+</div>
+""", unsafe_allow_html=True)
 
-# Main content area
+# Hidden button to trigger the toggle function
+st.markdown('<button id="nav-toggle" style="display:none"></button>', unsafe_allow_html=True)
+if st.button("Toggle Navigation", key="toggle_button", on_click=toggle_nav):
+    pass  # This is just to trigger the on_click function
+
+# Main content
 st.title("My Application")
 
-# Display content based on navigation selection
-if nav_option == "Section 1":
+# Conditional navigation panel
+if st.session_state.show_nav:
+    with st.container():
+        st.markdown("### Quick Navigation")
+        if st.button("Go to Section 1"):
+            st.session_state.section = "section1"
+            st.session_state.show_nav = False
+            st.experimental_rerun()
+        if st.button("Go to Section 2"):
+            st.session_state.section = "section2"
+            st.session_state.show_nav = False
+            st.experimental_rerun()
+        if st.button("Go to Section 3"):
+            st.session_state.section = "section3"
+            st.session_state.show_nav = False
+            st.experimental_rerun()
+
+# Content sections
+if 'section' not in st.session_state:
+    st.session_state.section = "section1"
+
+if st.session_state.section == "section1":
     st.header("Section 1")
     st.write("This is section 1 content")
     for i in range(15):
         st.write(f"Content line {i}")
     
-elif nav_option == "Section 2":
+elif st.session_state.section == "section2":
     st.header("Section 2")
     st.write("This is section 2 content")
     for i in range(15):
         st.write(f"Content line {i}")
     
-elif nav_option == "Section 3":
+elif st.session_state.section == "section3":
     st.header("Section 3")
     st.write("This is section 3 content")
     for i in range(15):
         st.write(f"Content line {i}")
 
-# Add "quick jump" buttons at the bottom
-st.markdown("### Quick Navigation")
-col1, col2, col3 = st.columns(3)
-
-with col1:
-    if st.button("Jump to Section 1"):
-        st.session_state.nav_radio = "Section 1"
-        st.experimental_rerun()
-
-with col2:
-    if st.button("Jump to Section 2"):
-        st.session_state.nav_radio = "Section 2"
-        st.experimental_rerun()
-
-with col3:
-    if st.button("Jump to Section 3"):
-        st.session_state.nav_radio = "Section 3"
-        st.experimental_rerun()
-
 
 
 # --- SHARED ON ALL PAGES ---