Account login

web/components/Navigation.js

@@ -1,26 +1,53 @@
-import Link from "next/link";
+"use client";
+
 import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/context/AuthContext";
 
 export default function DisplayNav() {
+  const {user, logout, loading} = useAuth();
+  const router = useRouter();
+
+  function handleLogout() {
+    logout();
+    router.push("/");
+  }
+
   return (
     <nav className="navbar">
-  <Image
-    className="mx-3"
-    src="/logo_simple.png"
-    alt="store_logo"
-    width={50}
-    height={50}
-    id="logo"
-  />
-  
-  <div className="nav-links">
-    <a href="/" className="nav-link">Home</a>
-    <a href="/adopt" className="nav-link">Adopt a Pet</a>
-    <a href="/" className="nav-link">Online Store</a>
-    <a href="/appointments" className="nav-link">Schedule an Appointment</a>
-    <a href="/contact" className="nav-link">Contact Us</a>
-    <a href="/aboutus" className="nav-link">About Us</a>
-  </div>
-</nav>
+      <Image className="mx-3"
+        src="/logo_simple.png"
+        alt="store_logo"
+        width={50}
+        height={50}
+        id="logo"/>
+
+      <div className="nav-links">
+        <a href="/" className="nav-link">Home</a>
+        <a href="/adopt" className="nav-link">Adopt a Pet</a>
+        <a href="/" className="nav-link">Online Store</a>
+        <a href="/appointments" className="nav-link">Schedule an Appointment</a>
+        <a href="/contact" className="nav-link">Contact Us</a>
+        <a href="/aboutus" className="nav-link">About Us</a>
+      </div>
+
+      <div className="nav-auth">
+        {loading ? null : user ? (
+          <>
+            <a href="/profile" className="nav-link nav-greeting">
+              Hello, {user.fullName || user.username}
+            </a>
+            <button className="nav-logout-btn" onClick={handleLogout}>
+              Log Out
+            </button>
+          </>
+        ) : (
+          <>
+            <a href="/login" className="nav-link">Log In</a>
+            <a href="/register" className="nav-link nav-register-btn">Register</a>
+          </>
+        )}
+      </div>
+    </nav>
   );
 }