Update app.py

app.py

@@ -62,6 +62,11 @@ st.markdown("""
     border-radius: 15px;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
+
+.nav-btn {
+    margin: 8px 0;
+    width: 100%;
+}
 </style>
 """, unsafe_allow_html=True)
 
@@ -162,13 +167,26 @@ else:
     # Sidebar navigation
     with st.sidebar:
         st.title("🧭 Navigation")
-        st.session_state.page = st.radio("Choose Section:", [
-            "📋 Personality Report", 
-            "📊 Visual Analysis",
-            "📱 Social Media Post",
-            "💡 Success Tips",
-            "📥 Download Report"
-        ])
+        st.markdown("---")
+        if st.button("📋 Personality Report", key="btn1", use_container_width=True, 
+                    help="View your detailed personality analysis"):
+            st.session_state.page = "📋 Personality Report"
+        
+        if st.button("📊 Visual Analysis", key="btn2", use_container_width=True,
+                    help="Explore visual representations of your personality"):
+            st.session_state.page = "📊 Visual Analysis"
+        
+        if st.button("📱 Social Media Post", key="btn3", use_container_width=True,
+                    help="Generate personalized social media posts"):
+            st.session_state.page = "📱 Social Media Post"
+        
+        if st.button("💡 Success Tips", key="btn4", use_container_width=True,
+                    help="Discover personalized improvement tips"):
+            st.session_state.page = "💡 Success Tips"
+        
+        if st.button("📥 Download Report", key="btn5", use_container_width=True,
+                    help="Download your complete personality report"):
+            st.session_state.page = "📥 Download Report"
 
     # Question flow
     if st.session_state.current_q < 5:
@@ -209,16 +227,21 @@ else:
 
         elif st.session_state.page == "📊 Visual Analysis":
             st.header("📊 Personality Visualization")
+            # Fix radar chart encoding
             radar_data = pd.DataFrame({
-                "Trait": list(traits.keys()) * 2,
-                "Score": list(traits.values()) * 2,
-                "Type": ["Base"]*5 + ["Current"]*5
+                "Trait": list(traits.keys()),
+                "Score": list(traits.values()),
+                "Angle": [i*(360/5) for i in range(5)]
             })
-            st.altair_chart(alt.Chart(radar_data).mark_line().encode(
-                theta="Trait",
-                r="Score",
-                color="Type"
-            ).project(type='radial'), use_container_width=True)
+            
+            chart = alt.Chart(radar_data).mark_line(point=True).encode(
+                theta=alt.Theta("Angle:Q", stack=True),
+                radius=alt.Radius("Score:Q", scale=alt.Scale(type='linear', zero=True)),
+                color=alt.value("#4CAF50"),
+                tooltip=["Trait", "Score"]
+            ).project(type='radial')
+            
+            st.altair_chart(chart, use_container_width=True)
 
         elif st.session_state.page == "📱 Social Media Post":
             st.header("📱 Create Social Post")