blob: 0bb254f8881cbfbef9e49d82daee0563d8d6b646 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
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
|
import React, { useState, useEffect } from "react";
import Link from "next/link";
import { useSession, signIn, signOut } from "next-auth/react";
import Image from "next/image";
import { parseCookies } from "nookies";
import MobileNav from "./shared/MobileNav";
function Navbar(props) {
const { data: session, status } = useSession();
const [isVisible, setIsVisible] = useState(false);
const [fade, setFade] = useState(false);
const [lang, setLang] = useState("en");
const [cookie, setCookies] = useState(null);
const handleShowClick = () => {
setIsVisible(true);
setFade(true);
};
const handleHideClick = () => {
setIsVisible(false);
setFade(false);
};
useEffect(() => {
let lang = null;
if (!cookie) {
const cookie = parseCookies();
lang = cookie.lang || null;
setCookies(cookie);
}
if (lang === "en" || lang === null) {
setLang("en");
} else if (lang === "id") {
setLang("id");
}
}, []);
// console.log(session.user?.image);
return (
<header className={`${props.className}`}>
<div className="flex h-16 w-auto items-center justify-between px-5 lg:mx-auto lg:w-[80%] lg:px-0 text-[#dbdcdd]">
<div className="pb-2 font-outfit text-4xl font-semibold lg:block text-white">
<Link href={`/${lang}/`}>moopa</Link>
</div>
<MobileNav sessions={session} />
<nav className="left-0 top-[-100%] hidden w-auto items-center gap-10 px-5 lg:flex">
<ul className="hidden gap-10 font-roboto text-md lg:flex items-center relative">
<li>
<Link
href={`/${lang}/`}
className="p-2 transition-all duration-100 hover:text-orange-600"
>
home
</Link>
</li>
<li>
<Link
href={`/${lang}/about`}
className="p-2 transition-all duration-100 hover:text-orange-600"
>
about
</Link>
</li>
<li>
<Link
href={`/${lang}/search/anime`}
className="p-2 transition-all duration-100 hover:text-orange-600"
>
search
</Link>
</li>
{status === "loading" ? (
<li>Loading...</li>
) : (
<>
{!session && (
<li>
<button
onClick={() => signIn("AniListProvider")}
className="ring-1 ring-action font-karla font-bold px-2 py-1 rounded-md"
>
Sign in
</button>
</li>
)}
{session && (
<li className="flex items-center justify-center group ">
<button>
<Image
src={session?.user.image.large}
alt="imagine"
width={500}
height={500}
className="object-cover h-10 w-10 rounded-full"
/>
</button>
<div className="absolute z-50 w-28 text-center -bottom-20 text-white shadow-2xl opacity-0 bg-secondary p-1 py-2 rounded-md font-karla font-light invisible group-hover:visible group-hover:opacity-100 duration-300 transition-all grid place-items-center gap-1">
<Link
href={`/${lang}/profile/${session?.user.name}`}
className="hover:text-action"
>
Profile
</Link>
<button
onClick={() => signOut("AniListProvider")}
className="hover:text-action"
>
Log out
</button>
</div>
{/* My List */}
</li>
)}
</>
)}
</ul>
</nav>
</div>
</header>
);
}
export default Navbar;
|