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/app/(main)/dashboard/page.tsx

@@ -2,32 +2,10 @@
 "use client";
 
 import { useAuth } from "@/context/auth-context";
-import { useRouter } from "next/navigation";
-import { useEffect } from "react";
+import Navbar from "@/components/layout/navbar";
 
 export default function DashboardPage() {
-  const { user, isLoading, isAuthenticated, logout } = useAuth();
-  const router = useRouter();
-
-  // Redirect to login if not authenticated
-  useEffect(() => {
-    // Add a small delay to ensure context is fully updated
-    const checkAuth = setTimeout(() => {
-      if (!isLoading && !isAuthenticated) {
-        console.log("Not authenticated, redirecting to login");
-        router.push("/login");
-      }
-    }, 100);
-
-    return () => clearTimeout(checkAuth);
-  }, [isLoading, isAuthenticated, router]);
-
-  // Handle logout with explicit redirect
-  const handleLogout = () => {
-    logout();
-    // Force redirection to login
-    router.push("/login");
-  };
+  const { user, isLoading } = useAuth();
 
   // Show loading state
   if (isLoading) {
@@ -41,48 +19,40 @@ export default function DashboardPage() {
     );
   }
 
-  // Extra safeguard - if we somehow get here without authentication, redirect
-  if (!isAuthenticated) {
-    router.push("/login");
-    return <div>Redirecting...</div>;
-  }
-
   return (
-    <div className="container mx-auto px-4 py-12">
-      <div className="max-w-7xl mx-auto">
-        <h1 className="text-3xl font-bold mb-8">Dashboard</h1>
+    <>
+      <Navbar />
+      <div className="container mx-auto px-4 py-12">
+        <div className="max-w-7xl mx-auto">
+          <h1 className="text-3xl font-bold mb-8">Dashboard</h1>
 
-        <div className="bg-white dark:bg-slate-800 rounded-lg shadow p-6">
-          <h2 className="text-xl font-semibold mb-4">
-            Welcome, {user?.first_name || "User"}!
-          </h2>
-          <p className="text-gray-600 dark:text-gray-300 mb-4">
-            You are now logged in to EventSpace.
-          </p>
+          <div className="bg-white dark:bg-slate-800 rounded-lg shadow p-6">
+            <h2 className="text-xl font-semibold mb-4">
+              Welcome, {user?.first_name || "User"}!
+            </h2>
+            <p className="text-gray-600 dark:text-gray-300 mb-4">
+              You are now logged in to EventSpace.
+            </p>
 
-          <div className="mt-8">
-            <h3 className="text-lg font-medium mb-4">Your Events</h3>
-            <div className="bg-gray-100 dark:bg-slate-700 rounded p-8 text-center">
-              <p className="text-gray-500 dark:text-gray-400">No events yet</p>
-              <button
-                className="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
-                onClick={() => alert("Create event functionality coming soon!")}
-              >
-                Create Your First Event
-              </button>
+            <div className="mt-8">
+              <h3 className="text-lg font-medium mb-4">Your Events</h3>
+              <div className="bg-gray-100 dark:bg-slate-700 rounded p-8 text-center">
+                <p className="text-gray-500 dark:text-gray-400">
+                  No events yet
+                </p>
+                <button
+                  className="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
+                  onClick={() =>
+                    alert("Create event functionality coming soon!")
+                  }
+                >
+                  Create Your First Event
+                </button>
+              </div>
             </div>
           </div>
-
-          <div className="mt-8">
-            <button
-              className="px-4 py-2 bg-red-100 text-red-600 rounded hover:bg-red-200 transition-colors"
-              onClick={handleLogout}
-            >
-              Sign Out
-            </button>
-          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 }

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>
+  );
+}