Add a navbar component and refactor dashboard logic

Introduce a reusable Navbar component to streamline navigation and hide it on public pages. Simplify dashboard logic by removing redundant authentication checks and improve layout structure. Enhances user experience with a cleaner and more maintainable codebase.

frontend/src/components/layout/navbar.tsx

@@ -0,0 +1,74 @@
+// src/components/layout/navbar.tsx
+"use client";
+
+import { useAuth } from "@/context/auth-context";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+export default function Navbar() {
+  const { user, isAuthenticated, logout } = useAuth();
+  const pathname = usePathname();
+
+  // Skip rendering navbar on login and public pages
+  const hideNavbarOn = ["/login", "/register", "/invite"];
+  if (hideNavbarOn.includes(pathname || "")) {
+    return null;
+  }
+
+  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>
+
+            {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">
+            {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>
+            )}
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}