55 lines
1.6 KiB
JavaScript
55 lines
1.6 KiB
JavaScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
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">
|
|
<Link href="/" className="nav-link">Home</Link>
|
|
<Link href="/adopt" className="nav-link">Adopt a Pet</Link>
|
|
<Link href="/products" className="nav-link">Online Store</Link>
|
|
<Link href="/appointments" className="nav-link">Schedule an Appointment</Link>
|
|
<Link href="/contact" className="nav-link">Contact Us</Link>
|
|
<Link href="/about" className="nav-link">About Us</Link>
|
|
</div>
|
|
|
|
<div className="nav-auth">
|
|
{loading ? null : user ? (
|
|
<>
|
|
<Link href="/profile" className="nav-link nav-greeting">
|
|
Hello, {user.fullName || user.username}
|
|
</Link>
|
|
<button type="button" className="nav-logout-btn" onClick={handleLogout}>
|
|
Log Out
|
|
</button>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Link href="/login" className="nav-link">Log In</Link>
|
|
<Link href="/register" className="nav-link nav-register-btn">Register</Link>
|
|
</>
|
|
)}
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|