53 lines
1.5 KiB
JavaScript
53 lines
1.5 KiB
JavaScript
"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>
|
|
|
|
<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>
|
|
);
|
|
} |