Refactor navbar for improved UI and code consistency.

Simplified the navbar layout and styling for better readability and maintainability. Replaced custom button styling with reusable Button component for consistency across the app. Enhanced hover and active state styles with dynamic class handling.

frontend/src/components/layout/navbar.tsx

@@ -5,6 +5,7 @@ import { useAuth } from "@/context/auth-context";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import ThemeToggle from "@/components/ui/theme-toggle";
+import { Button } from "@/components/ui/button";
 
 export default function Navbar() {
   const { user, isAuthenticated, logout } = useAuth();
@@ -16,60 +17,53 @@ export default function Navbar() {
     return null;
   }
 
+  const navLinkClass = (path: string) =>
+    `text-sm transition-colors ${
+      pathname === path || pathname?.startsWith(path)
+        ? "text-primary font-medium"
+        : "text-muted-foreground hover:text-primary"
+    }`;
+
   return (
-    <header className="bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800">
+    <header className="border-b bg-white dark:bg-gray-900 py-3">
-      <div className="container mx-auto px-4">
+      <div className="container mx-auto flex items-center justify-between px-4">
-        <div className="flex h-16 items-center justify-between">
+        <div className="flex items-center gap-8">
-          <div className="flex items-center">
+          <Link
-            <Link
+            href="/"
-              href="/"
+            className="text-xl font-semibold text-primary hover:text-primary/80 transition-colors"
-              className="text-xl font-bold text-blue-600 dark:text-blue-400"
+          >
-            >
+            EventSpace
-              EventSpace
+          </Link>
-            </Link>
 
-            {isAuthenticated && (
+          {isAuthenticated && (
-              <nav className="ml-10 hidden md:flex space-x-8">
+            <nav className="hidden md:flex items-center gap-6">
-                <Link
+              <Link href="/dashboard" className={navLinkClass("/dashboard")}>
-                  href="/dashboard"
+                Dashboard
-                  className={`text-sm font-medium ${pathname === "/dashboard" ? "text-blue-600 dark:text-blue-400" : "text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white"}`}
-                >
-                  Dashboard
-                </Link>
-                <Link
-                  href="/events"
-                  className={`text-sm font-medium ${pathname?.startsWith("/events") ? "text-blue-600 dark:text-blue-400" : "text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white"}`}
-                >
-                  Events
-                </Link>
-              </nav>
-            )}
-          </div>
-
-          <div className="flex items-center space-x-4">
-            <ThemeToggle />
-
-            {isAuthenticated ? (
-              <div className="flex items-center space-x-4">
-                <span className="text-sm text-slate-600 dark:text-slate-300">
-                  {user?.first_name}
-                </span>
-                <button
-                  onClick={logout}
-                  className="text-sm font-medium text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white"
-                >
-                  Sign out
-                </button>
-              </div>
-            ) : (
-              <Link
-                href="/login"
-                className="text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"
-              >
-                Sign in
               </Link>
-            )}
+              <Link href="/events" className={navLinkClass("/events")}>
-          </div>
+                Events
+              </Link>
+            </nav>
+          )}
+        </div>
+
+        <div className="flex items-center gap-4">
+          <ThemeToggle />
+
+          {isAuthenticated ? (
+            <div className="flex items-center gap-3">
+              <span className="text-sm text-muted-foreground">
+                {user?.first_name}
+              </span>
+              <Button variant="ghost" className="px-2" onClick={logout}>
+                Sign out
+              </Button>
+            </div>
+          ) : (
+            <Button asChild size="sm">
+              <Link href="/login">Sign in</Link>
+            </Button>
+          )}
         </div>
       </div>
     </header>