added navbar

app.py

@@ -291,9 +291,24 @@ def update_visualizations(benchmark_name, pricing_config):
     return leaderboard_df, scatter_fig
 
 with gr.Blocks(theme=my_theme, css='css.css', title="HAL: Holistic Agent Leaderboard") as demo:
+    # Add navigation bar
+    gr.HTML("""
+    <nav class="nav-bar">
+        <div class="nav-brand">
+        </div>
+        <div class="nav-links">
+            <a href="#leaderboards">Leaderboards</a>
+            <a href="https://github.com/benediktstroebl/hal-harness/tree/main/agents" target="_blank">Add Agent</a>
+            <a href="https://github.com/benediktstroebl/hal-harness/tree/main/hal/benchmarks" target="_blank">Add Benchmark</a>
+            <a href="https://github.com/benediktstroebl/hal-harness/tree/main" target="_blank">GitHub</a>
+            <a href="https://github.com/benediktstroebl/hal-harness#about-hal" target="_blank">About</a>
+        </div>
+    </nav>
+    """)
+    
     # First add the header HTML
     gr.HTML("""
-            <style>
+    <style>
     .hal-header {
         color: #ecf0f1;
         border-radius: 10px;

css.css

@@ -50,3 +50,48 @@ display: none;
 .ml-1 { margin-left: 1rem; }
 .mr-1 { margin-right: 1rem; }
 
+/* Navigation Bar */
+.nav-bar {
+    background-color: var(--background-color);
+    padding: 1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+}
+
+.nav-links {
+    display: flex;
+    gap: 2rem;
+    align-items: center;
+}
+
+.nav-links a {
+    color: var(--text-color);
+    text-decoration: none;
+    font-weight: 500;
+    transition: color 0.3s ease;
+}
+
+.nav-links a:hover {
+    color: var(--primary-color);
+}
+
+.nav-brand {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.nav-brand img {
+    height: 40px;
+    width: auto;
+}
+
+.nav-brand a {
+    color: white;
+    text-decoration: none;
+    font-size: 1.5rem;
+    font-weight: bold;
+}
+