Update src/streamlit_app.py

src/streamlit_app.py

@@ -3,6 +3,9 @@ import pandas as pd
 import random
 import os
 
+# Page config to use full width
+st.set_page_config(layout="wide")
+
 # Load movie data
 BASE_DIR = os.path.dirname(__file__)
 MOVIES_PATH = os.path.join(BASE_DIR, "movies.csv")
@@ -24,7 +27,7 @@ if "rated" not in st.session_state:
 if "quiz_history" not in st.session_state:
     st.session_state.quiz_history = []
 
-# Navigation bar
+# Navigation and search
 st.markdown("""
     <style>
         .nav-bar {
@@ -33,26 +36,51 @@ st.markdown("""
             align-items: center;
             background-color: #1b263b;
             padding: 1rem;
+            width: 100%;
+        }
+        .nav-left, .nav-right {
+            display: flex;
+            align-items: center;
         }
         .nav-item {
             color: white;
             font-size: 20px;
             text-decoration: none;
-            margin: 0 1rem;
-            cursor: pointer;
+            margin-right: 1rem;
         }
-        .search-bar {
-            width: 50%;
+        .search-form {
+            display: flex;
+            width: 100%;
+            max-width: 700px;
+        }
+        .search-input {
+            flex: 1;
             padding: 0.5rem;
             font-size: 16px;
+            border: none;
+            border-radius: 4px 0 0 4px;
+        }
+        .search-button {
+            padding: 0.5rem 1rem;
+            font-size: 16px;
+            background-color: #0d6efd;
+            color: white;
+            border: none;
+            border-radius: 0 4px 4px 0;
+            cursor: pointer;
         }
     </style>
     <div class="nav-bar">
-        <span class="nav-item" onclick="window.location.href='/'">🏠 Home</span>
-        <form method="get" action="/">
-            <input type="text" name="search" class="search-bar" placeholder="Search movies...">
+        <div class="nav-left">
+            <a class="nav-item" href="/?home=true">🏠 Home</a>
+        </div>
+        <form class="search-form" action="/" method="get">
+            <input type="text" name="search" class="search-input" placeholder="Search movies...">
+            <button type="submit" class="search-button">🔍</button>
         </form>
-        <span class="nav-item" onclick="window.location.href='/?recommend=true'">🎯 Quiz</span>
+        <div class="nav-right">
+            <a class="nav-item" href="/?recommend=true">🎯 Quiz</a>
+        </div>
     </div>
 """, unsafe_allow_html=True)