This repository has been archived by the owner on May 28, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 7
/
header.tsx
79 lines (70 loc) · 2.18 KB
/
header.tsx
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
import { useEffect, useState } from "react";
import Link from "next/link";
import NavLink from "~components/nav-link";
// import { FiSun, FiMoon } from "react-icons/fi";
import classNames from "classnames";
// import useDarkMode from "~hooks/dark-mode";
// const labelToggleDark = "Toggle dark mode";
const navLinks = [
["Twitter", "https://twitter.com/phuctm97"],
["Github", "https://github.com/phuctm97"],
["Home", "/"],
];
const Header = () => {
// const [isDark, toggleDark] = useDarkMode();
const [isShrunk, setShrunk] = useState(false);
useEffect(() => {
const onScroll = () => {
setShrunk((isShrunk) => {
if (
!isShrunk &&
(document.body.scrollTop > 20 ||
document.documentElement.scrollTop > 20)
) {
return true;
}
if (
isShrunk &&
document.body.scrollTop < 4 &&
document.documentElement.scrollTop < 4
) {
return false;
}
return isShrunk;
});
};
window.addEventListener("scroll", onScroll);
return () => window.removeEventListener("scroll", onScroll);
}, []);
return (
<header
className={classNames(
"sticky top-0 z-10 py-2 my-4 md:my-6 bg-white bg-opacity-80 border-b border-transparent transition duration-500 dark:bg-black dark:text-white",
{ "border-gray-200 dark:border-gray-800 backdrop-blur": isShrunk }
)}
>
<div className="container-custom flex flex-row items-center mx-auto">
{/* Enable dark mode later.
{isDark !== null && (
<button
className="bg-gray-300 p-2 md:p-3 rounded dark:bg-gray-700"
title={labelToggleDark}
aria-label={labelToggleDark}
onClick={toggleDark}
>
{isDark ? <FiSun /> : <FiMoon className="fill-current" />}
</button>
)} */}
<h1 className="font-bold">
<Link href="/">@phuctm97</Link>
</h1>
<nav className="ml-auto">
{navLinks.map((item, index) => (
<NavLink key={index} text={item[0]} href={item[1]} />
))}
</nav>
</div>
</header>
);
};
export default Header;