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">
-      <div className="container mx-auto px-4">
-        <div className="flex h-16 items-center justify-between">
-          <div className="flex items-center">
-            <Link
-              href="/"
-              className="text-xl font-bold text-blue-600 dark:text-blue-400"
-            >
-              EventSpace
-            </Link>
+    <header className="border-b bg-white dark:bg-gray-900 py-3">
+      <div className="container mx-auto flex items-center justify-between px-4">
+        <div className="flex items-center gap-8">
+          <Link
+            href="/"
+            className="text-xl font-semibold text-primary hover:text-primary/80 transition-colors"
+          >
+            EventSpace
+          </Link>
 
-            {isAuthenticated && (
-              <nav className="ml-10 hidden md:flex space-x-8">
-                <Link
-                  href="/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
+          {isAuthenticated && (
+            <nav className="hidden md:flex items-center gap-6">
+              <Link href="/dashboard" className={navLinkClass("/dashboard")}>
+                Dashboard
               </Link>
-            )}
-          </div>
+              <Link href="/events" className={navLinkClass("/events")}>
+                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>