Update app.py

app.py

@@ -51,7 +51,7 @@ import streamlit as st
 st.set_page_config(
     page_title="FIFA World Cup 2022 Data Analysis",
     page_icon="⚽",
-    layout="centered",  # Set layout to wide
+    layout="centered",  # Set layout to centered
     initial_sidebar_state="expanded"  # Keep sidebar expanded by default
 )
 
@@ -66,17 +66,24 @@ body, .sidebar .sidebar-content, .sidebar .sidebar-content .block-container {
 """
 st.markdown(universal_text_color_css, unsafe_allow_html=True)  # Apply universal text color CSS styles
 
-# CSS styles to center the page title
+# CSS styles to center the page title and fix sidebar
 centered_title_css = """
 <style>
 .title-wrapper {
     text-align: center !important;
     margin-bottom: 0.5rem; /* Adjust margin bottom */
 }
+/* Fix sidebar while allowing scrolling within */
+.sidebar .sidebar-content {
+    position: fixed !important;
+    overflow-y: auto;
+    height: 100%;
+    width: 300px;
+}
 </style>
 """
 
-# Apply the CSS styles to center the page title
+# Apply the CSS styles
 st.markdown(centered_title_css, unsafe_allow_html=True)
 
 # Title
@@ -86,28 +93,6 @@ st.title("FIFA World Cup 2022 Data Analysis")
 if 'app_mode' not in st.session_state:
     st.session_state.app_mode = 'Welcome'
 
-
-
-# Set sidebar width
-st.markdown(
-    """
-    <style>
-    .sidebar .sidebar-content {
-        width: 300px;
-    }
-    .sidebar .sidebar-content .block-container {
-        color: #333; /* Set sidebar text color */
-    }
-    .sidebar .sidebar-content .block-container .stRadio {
-        font-weight: bold; /* Make sidebar buttons bold */
-        color: #333; /* Set sidebar button text color */
-    }
-    </style>
-    """,
-    unsafe_allow_html=True,
-)
-
-
 st.sidebar.markdown("Navigate through below sections:")
 # Page selection buttons
 button_labels = ['Welcome 🏠', 'Introduction 📖', 'Visualization 📊', 'Prediction 📈', 'Feature of Importance & Shap 📊', 'MLflow & Deployment 🚀', 'Conclusion 🏁']