Navbar enhanced with same color scheme

app.py

@@ -15,6 +15,7 @@
 import streamlit.components.v1 as components
 import os
 from dotenv import load_dotenv
+from streamlit_navigation_bar import st_navbar
 import logging
 import sys
 
@@ -40,6 +41,7 @@ def global_error_handler(exc_type, exc_value, exc_traceback):
 #AI Integration
 import anthropic
 import datetime
+
 # CSS for Scroll to Top Button
 scroll_to_top = """
     <style>
@@ -190,53 +192,24 @@ def load_lottie_url(url: str):
 
 # Main function to control page navigation
 def main():
-    selected = option_menu(
-        menu_title=None,
-
-        options=["Home", "Calm Space", "About & Feedback","FAQs"],
-        icons=["house-door-fill", "cloud-sun-fill", "chat-dots-fill","question-circle-fill"],
-
-        menu_icon="sun",
-        default_index=0,
-        orientation="horizontal",
-        styles={
-            "container": {
-                "padding": "0!important",
-                "background-color": "#333",
-                "border-radius": "10px",
-                "box-shadow": "0 4px 6px rgba(0, 0, 0, 0.1)",
-                "width": "100%",  # Increase the width of the menu bar
-                "max-width": "100%",  # Prevent overflow
-            },
-            "nav-link": {
-                "font-size": "18px",
-                "text-align": "center",
-                "margin": "0 20px",  # Increase left and right margin to expand space between items
-                "--hover-color": "#ddd",
-                "border-radius": "10px",
-                "color": "#fff",
-                "background-color": "rgba(0, 0, 0, 0.8)",  # More opaque background
-                "transition": "background-color 0.3s ease, transform 0.2s"
-            },
-            "nav-link-selected": {
-                "background-color": "#04AA6D",
-                "color": "#fff",
-                "font-size": "14px",
-            }
-        }
-    )
+
+    styles = {
+    "nav": {
+        "background-color": "rgb(0, 0, 0)",
+    },
+    }
 
+    selected = st_navbar(["Home", "Calm Space", "About & Feedback", "FAQs"], styles=styles)
+
     if selected == "Home":
         show_main_page()
     elif selected == "Calm Space":
         show_calm_space()
-    elif selected == "Resources":  # Added condition for "Resources"
-        show_resources()  # Call the new function
     elif selected == "About & Feedback":
         show_about_and_feedback()
     elif selected == "FAQs":
         show_FAQs_page()
-
+    
 
 def show_main_page():
     st.markdown(

requirements.txt

@@ -7,3 +7,4 @@ streamlit-option-menu==0.3.2
 anthropic
 python-dotenv
 pymongo
+streamlit_navigation_bar