-
Notifications
You must be signed in to change notification settings - Fork 0
/
Header.js
106 lines (97 loc) · 2.62 KB
/
Header.js
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
import React, { useEffect, useRef, useState} from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faEnvelope } from "@fortawesome/free-solid-svg-icons";
import {
faGithub,
faLinkedin,
faMedium,
faStackOverflow,
} from "@fortawesome/free-brands-svg-icons";
import { Box, HStack } from "@chakra-ui/react";
const socials = [
{
icon: faEnvelope,
url: "mailto: [email protected]",
},
{
icon: faGithub,
url: "https://github.com",
},
{
icon: faLinkedin,
url: "https://www.linkedin.com",
},
{
icon: faMedium,
url: "https://medium.com",
},
{
icon: faStackOverflow,
url: "https://stackoverflow.com",
},
];
const Header = () => {
const [scrollPosition, setScrollPosition] = useState(window.scrollY)
const [hideHeader, setHideHeader] = useState(false)
const handleClick = (anchor) => () => {
const id = `${anchor}-section`;
const element = document.getElementById(id);
if (element) {
element.scrollIntoView({
behavior: "smooth",
block: "start",
});
}
};
useEffect(() => {
const handleScroll = () => {
const newScrollPosition = window.scrollY
const scrollDirection = newScrollPosition - scrollPosition > 0 // greater than 0 means scrolling down, less than 0 means scrolling up, 0 means no scrolling
setHideHeader(scrollPosition < newScrollPosition)
setScrollPosition(newScrollPosition)
}
window.addEventListener('scroll', handleScroll)
return (() => window.removeEventListener('scroll', handleScroll))
})
return (
!hideHeader && (
<Box
position="fixed"
top={0}
left={0}
right={0}
translateY={0}
transitionProperty="transform"
transitionDuration=".3s"
transitionTimingFunction="ease-in-out"
backgroundColor="#18181b"
>
<Box color="white" maxWidth="1280px" margin="0 auto">
<HStack
px={16}
py={4}
justifyContent="space-between"
alignItems="center"
>
<nav>
<HStack spacing={8}>
{socials.map((social) => (
<a key={social.url} href={social.url} target="_blank">
<FontAwesomeIcon icon={social.icon} size="2x" />
</a>
))}
</HStack>
</nav>
<nav>
<HStack spacing={8}>
<a onClick={handleClick("projects")}>Projects</a>
<a onClick={handleClick("contactme")}>Contact me</a>
</HStack>
</nav>
</HStack>
</Box>
</Box>
)
);
};
export default Header;