Newer
Older
"use client";
import Link from "next/link";
import { useSession, signOut } from "next-auth/react";
import { useEffect, useState } from "react";
export default function Header() {
const { data: session } = useSession();
const [active, setActive] = useState<string | null>(null);
const firstName = session?.user?.firstName || "";
const lastName = session?.user?.lastName
useEffect(() => {
const path = window.location.pathname;
if (path === "/") {
setActive("home");
}
else if (path.startsWith("/annonces/rent")) {
setActive("rent");
else if (path.startsWith("/annonces/buy")) {
setActive("buy");
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
}
}, []);
return (
<header className="bg-primary flex-col md:flex md:flex-row items-center pr-0 md:pr-6 relative z-50 pb-4 md:pb-0">
<div className="tw-flex border-secondary w-full md:w-fit mr-0 md:mr-auto flex h-full items-center justify-center border-b-5 pr-2 pl-6 font-oswald">
<div className="flex items-center space-x-3">
<svg
preserveAspectRatio="xMidYMid meet"
data-bbox="7.767 51.693 183.51 85.375"
viewBox="7.767 51.693 183.51 85.375"
height="50"
width="50"
xmlns="http://www.w3.org/2000/svg"
data-type="color"
role="img"
aria-label="Page d'accueil">
<g>
<path
fill="#ffffff"
d="M178.752 121.175h-8V92.854l-42.739-31.219L99.51 82.877H29.201v38.298h-8V74.877h75.655l31.109-23.184 50.787 37.099v32.383z"
data-color="1"></path>
<path fill="#ffffff" d="M191.277 129.068v8H7.767v-8h183.51z" data-color="1"></path>
<path fill="#ffffff" d="M131.794 91.26v15.298h-8V91.26h8z" data-color="1"></path>
<path fill="#ffffff" d="M75.724 91.26v15.298h-8V91.26h8z" data-color="1"></path>
<path fill="#ffffff" d="M51.213 91.26v15.298h-8V91.26h8z" data-color="1"></path>
</g>
</svg>
<Link href="/" className="text-2xl font-bold text-white">
Immo<span className="text-gray-400">Next</span>
</Link>
</div>
</div>
<nav>
<ul className="flex items-center justify-center space-x-4 text-white font-(--font-roboto-thin) mt-4 md:mt-0">
<li>
<Link
href="/"
className={`${
active === "home" ? "text-secondary" : ""
} `}
onClick={() => setActive("home")}>
Accueil
</Link>
</li>
<li>
<Link
className={`hover:text-secondary transition-colors duration-200 ease-in-out hover:cursor-pointer ${
active === "rent" ? "text-secondary" : ""
onClick={() => setActive("rent")}>
Locations
</Link>
</li>
<li>
<Link
className={`hover:text-secondary transition-colors duration-200 ease-in-out hover:cursor-pointer ${
active === "buy" ? "text-secondary" : ""
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
Achats
</Link>
</li>
{session ? (
<>
<li className="group relative text-white sm:block">
<div className="cursor-pointer">
{firstName} {lastName}
</div>
<div className="pointer-events-none absolute inset-0 top-full h-2 w-full group-hover:pointer-events-auto"></div>
<div className="bg-primary invisible absolute top-full right-0 mt-2 w-full translate-y-1 rounded-md opacity-0 shadow-lg transition-all duration-150 ease-out group-hover:visible group-hover:translate-y-0 group-hover:opacity-100">
<button
onClick={() => signOut()}
className="hover:text-secondary w-full px-4 py-2 text-left text-white transition-colors duration-200 ease-in-out hover:cursor-pointer">
Déconnexion
</button>
</div>
</li>
<li></li>
</>
) : (
<>
<li>
<Link
href="/login"
className="hover:text-secondary transition-colors duration-200 ease-in-out hover:cursor-pointer">
Se connecter
</Link>
</li>
<li>
<Link
href="/register"
className="hover:text-secondary transition-colors duration-200 ease-in-out hover:cursor-pointer">
S'inscrire
</Link>
</li>
</>
)}
</ul>
</nav>
</header>
);
}