Improve website navigation appearance and highlight the current page

Update CSS for navbar and add JavaScript to apply an 'active' class to the current page's link in the navbar.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 75bceff7-98f2-4f6e-ae8e-e735399a1fe8
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 804f4791-b980-4106-94d1-355e504e838b
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d0a1d46d-d203-4308-bc6a-312ac7c0243b/75bceff7-98f2-4f6e-ae8e-e735399a1fe8/OT40Fqx

static/css/styles.css

@@ -65,29 +65,26 @@ body::after {
 .navbar-inner {
     display: flex;
     align-items: center;
-    padding: 12px 24px;
-    background: rgba(0, 0, 0, 0.5);
-    backdrop-filter: blur(12px);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 16px;
+    padding: 16px 32px;
+    background: transparent;
 }
 
 .navbar-logo {
     display: flex;
     align-items: center;
-    padding-right: 20px;
-    border-right: 1px solid rgba(255, 255, 255, 0.1);
+    padding-right: 24px;
+    border-right: 1px solid rgba(255, 255, 255, 0.15);
     margin-right: auto;
 }
 
 .navbar-logo img {
-    height: 36px;
+    height: 40px;
     display: block;
 }
 
 .navbar-links {
     display: flex;
-    gap: 8px;
+    gap: 32px;
     align-items: center;
     position: absolute;
     left: 50%;
@@ -95,19 +92,20 @@ body::after {
 }
 
 .navbar-links a {
-    color: #d1d5db;
+    color: #9ca3af;
     text-decoration: none;
     font-family: var(--font-body);
     font-weight: 500;
-    font-size: 14px;
-    padding: 8px 16px;
-    border-radius: 8px;
-    transition: all 0.2s ease;
+    font-size: 15px;
+    transition: color 0.2s ease;
 }
 
 .navbar-links a:hover {
     color: #ffffff;
-    background: rgba(255, 255, 255, 0.1);
+}
+
+.navbar-links a.active {
+    color: #3b82f6;
 }
 
 .menu-button {

templates/base.html

@@ -44,22 +44,30 @@
     <script>
         const menuButton = document.querySelector('.menu-button');
         const navSide = document.querySelector('.nav-side');
-        const navLinks = document.querySelectorAll('.nav-side a'); // Select all links inside nav-side
+        const navLinks = document.querySelectorAll('.nav-side a');
 
         menuButton.addEventListener('click', () => {
             if (navSide.style.display === 'none' || navSide.style.display === '') {
-                navSide.style.display = 'flex'; // Show the nav-side with flex
+                navSide.style.display = 'flex';
             } else {
-                navSide.style.display = 'none'; // Hide the nav-side
+                navSide.style.display = 'none';
             }
         });
 
-        // Add event listeners to each link
         navLinks.forEach(link => {
             link.addEventListener('click', () => {
-                navSide.style.display = 'none'; // Hide the nav-side
+                navSide.style.display = 'none';
             });
         });
+
+        // Highlight active page
+        const currentPath = window.location.pathname;
+        const navbarLinks = document.querySelectorAll('.navbar-links a');
+        navbarLinks.forEach(link => {
+            if (link.getAttribute('href') === currentPath) {
+                link.classList.add('active');
+            }
+        });
     </script>
     <!-- This is where child templates will insert their content -->
     {% block content %}