Skip to content

Commit 6e5d09c

Browse files
manecipoglumanecipoglu
committed
Add intersection API to navbar
1 parent 385192f commit 6e5d09c

File tree

3 files changed

+120
-158
lines changed

3 files changed

+120
-158
lines changed

‎CHANGELOG.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
1616

1717
### Added
1818

19-
- add new footer and newsletter components styling
19+
- new footer and newsletter components styling
20+
- new nav component styling with intersection API
2021

2122
### Fixed
2223

‎components/Nav.js

Lines changed: 37 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,43 @@
1+
import { useState, useEffect, useRef } from 'react';
12
import Link from 'next/link';
2-
import { useState } from 'react';
3-
import styles from '../styles/Nav.module.scss';
43
import Image from 'next/image';
54
import ButtonLink from './ButtonLink';
6-
import buttonStyles from '../styles/ButtonLink.module.scss';
5+
import styles from '../styles/Nav.module.scss';
76

87
export default function Nav() {
9-
const [active, setActive] = useState(true);
8+
const [active, setActive] = useState(false);
9+
const navRef = useRef();
10+
const headerRef = useRef();
11+
12+
useEffect(() => {
13+
const observer = new IntersectionObserver(
14+
([entry]) => {
15+
if (!entry.isIntersecting) {
16+
navRef.current.classList.add(styles.sticky);
17+
} else {
18+
navRef.current.classList.remove(styles.sticky);
19+
}
20+
},
21+
{
22+
threshold: 0,
23+
rootMargin: '300px',
24+
}
25+
);
26+
27+
if (headerRef.current) {
28+
observer.observe(headerRef.current);
29+
}
30+
31+
return () => {
32+
if (headerRef.current) {
33+
observer.unobserve(headerRef.current);
34+
}
35+
};
36+
}, []);
1037

1138
return (
12-
<header className={styles.header}>
13-
<nav className={styles.nav}>
39+
<header className={styles.header} ref={headerRef}>
40+
<nav className={styles.nav} ref={navRef}>
1441
<div className={styles.nav__logo}>
1542
<Link href="/" passHref>
1643
<a>
@@ -47,26 +74,22 @@ export default function Nav() {
4774
</li>
4875
<li className={styles.nav__item}>
4976
<ButtonLink
50-
styles={{
51-
color: 'black',
52-
backgroundColor: 'white',
53-
minWidth: '9rem',
54-
}}
55-
className={buttonStyles.btn}
77+
className={`${styles.nav__button} ${active ? styles.active : ''}`}
5678
link="https://webdevpath.slack.com/join/shared_invite/zt-xqqgwwo5-a09BSVWC9ZrHmS6RaMBzVw#/shared-invite/email"
5779
>
5880
Join us
5981
</ButtonLink>
6082
</li>
6183
</ul>
62-
<div
84+
<button
6385
className={`${styles.nav__hamburger} ${active ? styles.active : ''}`}
6486
onClick={() => setActive(active => !active)}
87+
aria-label="toggle navigation"
6588
>
6689
<span className={styles.nav__hamburger__bar}></span>
6790
<span className={styles.nav__hamburger__bar}></span>
6891
<span className={styles.nav__hamburger__bar}></span>
69-
</div>
92+
</button>
7093
</nav>
7194
</header>
7295
);

‎styles/Nav.module.scss

Lines changed: 81 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -1,151 +1,89 @@
11
@use './variables' as *;
22
@use './mixins' as *;
33

4-
// .navContainer {
5-
// width: 80%;
6-
// position: relative;
7-
// margin: 0 auto;
8-
// }
9-
10-
// .header {
11-
// width: 100%;
12-
// padding: 2.25rem 0;
13-
// background-color: $dark-bg-color;
14-
// }
15-
16-
// .align {
17-
// display: flex;
18-
// align-items: center;
19-
// }
20-
21-
// .nav {
22-
// width: 100%;
23-
// overflow: hidden;
24-
// visibility: hidden;
25-
// height: 0;
26-
// position: absolute;
27-
// font-size: 1em;
28-
// }
29-
30-
// .navToggle {
31-
// cursor: pointer;
32-
// border: 0;
33-
// width: 3em;
34-
// height: 3em;
35-
// padding: 0;
36-
// background-color: $transparent;
37-
// color: $black;
38-
// transition: opacity 250ms ease;
39-
// position: absolute;
40-
// right: 0;
41-
42-
// &:hover,
43-
// &:focus {
44-
// opacity: 0.6;
45-
// }
46-
// }
47-
48-
// .hamburger {
49-
// width: 50%;
50-
// position: relative;
51-
52-
// &,
53-
// &::before,
54-
// &::after {
55-
// display: block;
56-
// margin: 0 auto;
57-
// height: 3px;
58-
// background-color: $primary-content-color;
59-
// }
60-
61-
// &::before,
62-
// &::after {
63-
// content: '';
64-
// width: 100%;
65-
// }
66-
67-
// &::before {
68-
// transform: translateY(-6px);
69-
// }
70-
71-
// &::after {
72-
// transform: translateY(3px);
73-
// }
74-
// }
75-
76-
// .navVisible {
77-
// visibility: visible;
78-
// height: auto;
79-
// position: relative;
80-
// text-align: start;
81-
// padding-top: 1em;
82-
// }
83-
84-
// .navList {
85-
// margin: 0;
86-
// padding: 0;
87-
// list-style: none;
88-
// }
89-
90-
// .navItem {
91-
// margin-top: 0.75em;
92-
// }
93-
94-
// .navLink {
95-
// text-decoration: none;
96-
// color: $white;
97-
98-
// &:focus,
99-
// &:hover {
100-
// opacity: 0.6;
101-
// }
102-
// }
103-
104-
// @media (min-width: $tablet-breakpoint) {
105-
// .navToggle {
106-
// display: none;
107-
// }
108-
109-
// .nav {
110-
// visibility: visible;
111-
// display: flex;
112-
// align-items: center;
113-
// justify-content: flex-end;
114-
// height: auto;
115-
// position: relative;
116-
// }
117-
118-
// .navList {
119-
// display: flex;
120-
// }
121-
122-
// .navItem {
123-
// margin: 0 0 0 1.5em;
124-
// }
125-
126-
// .row {
127-
// display: flex;
128-
// justify-content: space-between;
129-
// }
130-
// }
131-
132-
.header {
4+
.nav {
1335
color: $white;
1346
background-color: $dark-bg-color;
135-
}
136-
137-
.nav {
1387
padding: 0 3rem;
1398
display: flex;
1409
justify-content: space-between;
14110
align-items: center;
142-
height: 6rem;
11+
height: 4.5rem;
12+
width: 100%;
14313

14414
@include desktop {
14515
height: 12rem;
14616
padding: 2rem 5.5rem;
147-
width: 100%;
148-
z-index: 100;
17+
}
18+
19+
&.sticky {
20+
position: fixed;
21+
background-color: $white;
22+
color: $dark-bg-color;
23+
z-index: 2;
24+
25+
& span {
26+
background-color: $dark-bg-color;
27+
}
28+
29+
& img {
30+
filter: brightness(0) saturate(100%);
31+
}
32+
33+
& .nav__links {
34+
@include desktop {
35+
background-color: $white;
36+
color: $primary-content-color;
37+
}
38+
}
39+
40+
& .nav__button {
41+
@include desktop {
42+
background-color: $dark-bg-color;
43+
color: $white;
44+
}
45+
}
46+
47+
& .nav__btn a {
48+
@include desktop {
49+
color: $white;
50+
background-color: $dark-bg-color;
51+
}
52+
}
53+
}
54+
55+
&__btn {
56+
order: 2;
57+
}
58+
59+
&__button {
60+
color: $dark-bg-color;
61+
background-color: $white;
62+
min-width: 9rem;
63+
padding: 0.5rem 2rem;
64+
border-radius: 2rem;
65+
transition: 0.3s ease;
66+
cursor: pointer;
67+
font-weight: bold;
68+
font-size: 1.2rem;
69+
line-height: 2rem;
70+
text-align: center;
71+
display: inline-block;
72+
border: none;
73+
74+
@include large-desktop {
75+
font-size: 1.5rem;
76+
}
77+
78+
&.active {
79+
color: $white;
80+
background-color: $dark-bg-color;
81+
82+
@include desktop {
83+
background-color: $white;
84+
color: $dark-bg-color;
85+
}
86+
}
14987
}
15088

15189
&__logo {
@@ -157,12 +95,11 @@
15795
}
15896

15997
&__links {
160-
background-color: $dark-bg-color;
16198
display: none;
16299
padding: 1rem 0 2rem 0;
163100
margin: 0;
164101
position: relative;
165-
top: 5rem;
102+
top: 4.5rem;
166103

167104
@include desktop {
168105
display: flex;
@@ -179,12 +116,15 @@
179116
width: 100%;
180117
position: absolute;
181118
left: 0;
119+
background-color: $white;
120+
color: $primary-content-color;
182121

183122
@include desktop {
184-
display: flex;
185123
flex-direction: row;
186124
position: static;
187125
width: auto;
126+
background-color: $dark-bg-color;
127+
color: $white;
188128
}
189129
}
190130
}
@@ -195,7 +135,7 @@
195135
font-weight: 400;
196136
display: block;
197137

198-
@include desktop {
138+
@include large-desktop {
199139
font-size: 1.5rem;
200140
}
201141
}
@@ -209,6 +149,8 @@
209149
&__hamburger {
210150
display: block;
211151
cursor: pointer;
152+
background: none;
153+
border: none;
212154

213155
@include desktop {
214156
display: none;
@@ -233,8 +175,4 @@
233175
transform: translateY(-6px) rotate(-45deg);
234176
}
235177
}
236-
237-
&.sticky {
238-
position: fixed;
239-
}
240178
}

0 commit comments

Comments
 (0)