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,62 +17,55 @@ 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
             href="/"
-              className="text-xl font-bold text-blue-600 dark:text-blue-400"
+            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">
+            <nav className="hidden md:flex items-center gap-6">
-                <Link
+              <Link href="/dashboard" className={navLinkClass("/dashboard")}>
-                  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
+              <Link href="/events" className={navLinkClass("/events")}>
-                  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">
+        <div className="flex items-center gap-4">
           <ThemeToggle />
 
           {isAuthenticated ? (
-              <div className="flex items-center space-x-4">
+            <div className="flex items-center gap-3">
-                <span className="text-sm text-slate-600 dark:text-slate-300">
+              <span className="text-sm text-muted-foreground">
                 {user?.first_name}
               </span>
-                <button
+              <Button variant="ghost" className="px-2" onClick={logout}>
-                  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>
+              </Button>
             </div>
           ) : (
-              <Link
+            <Button asChild size="sm">
-                href="/login"
+              <Link href="/login">Sign in</Link>
-                className="text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"
+            </Button>
-              >
-                Sign in
-              </Link>
           )}
         </div>
       </div>
-      </div>
     </header>
   );
 }