Skip to content

Commit 405b807

Browse files
Satoshi-ShSatoshi-Sh
authored
Merge pull request #276 from Web-Dev-Path/refactor/to-scss-Nav
Refactor/to scss nav
2 parents c5d318d + 25e66bb commit 405b807

5 files changed

Lines changed: 300 additions & 311 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -184,6 +184,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
184184
- Layout
185185
- RelatedPosts
186186
- Footer
187+
- Nav
187188
- Extracted :root from themes.scss to globals.scss
188189
- Updated ContactUsForm's checkbox wrapper from div to label to enhance its accessibility
189190
- Updated SearchInput width to 100% for better styling
@@ -195,3 +196,4 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
195196
- Created a combineClasses function to clean up conditional class handling
196197
- Rename RowAlignLeft to Row
197198
- Remove unessesary stylings from the Layout.
199+
- Fixed active state bug on the navigation.

‎components/layout/Nav/Nav.module.scss‎

Lines changed: 232 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,232 @@
1+
@use '@/styles/index' as *;
2+
3+
.header {
4+
color: var(--color-white);
5+
background-color: var(--color-transparent);
6+
width: 100%;
7+
display: flex;
8+
align-items: center;
9+
padding: 2rem 0;
10+
height: 4.5rem;
11+
z-index: 100;
12+
13+
@include desktop {
14+
height: auto;
15+
}
16+
}
17+
18+
.navWrapperSticky {
19+
background-color: var(--color-white);
20+
width: 100%;
21+
display: flex;
22+
justify-content: center;
23+
position: fixed;
24+
top: 0;
25+
left: 0;
26+
z-index: 100;
27+
height: 4.5rem;
28+
box-shadow: var(--shadow-default);
29+
}
30+
31+
.nav {
32+
display: flex;
33+
justify-content: space-between;
34+
align-items: center;
35+
}
36+
37+
.navSticky {
38+
@extend .nav;
39+
width: 90%;
40+
max-width: $large-desktop-breakpoint;
41+
}
42+
43+
.button {
44+
color: var(--dark-bg);
45+
background-color: var(--color-white);
46+
min-width: 9rem;
47+
padding: 0.5rem 2rem;
48+
border-radius: 2rem;
49+
cursor: pointer;
50+
font-weight: bold;
51+
font-size: 1.2rem;
52+
text-align: center;
53+
display: inline-block;
54+
border: 1px solid var(--transparent);
55+
@include transition(all 0.3s ease);
56+
57+
@include desktop {
58+
font-size: 1.5rem;
59+
}
60+
61+
&:hover {
62+
text-decoration: none;
63+
color: var(--color-white);
64+
background-color: var(--color-transparent);
65+
border: 1px solid var(--color-white);
66+
}
67+
68+
&.active {
69+
color: var(--color-white);
70+
background-color: var(--dark-bg);
71+
padding: 0.25rem 1rem;
72+
min-width: 7rem;
73+
font-size: 1.2rem;
74+
75+
&:hover {
76+
color: var(--dark-bg);
77+
background-color: var(--color-transparent);
78+
border: 1px solid var(--dark-bg);
79+
}
80+
}
81+
}
82+
83+
.buttonSticky {
84+
@extend .button;
85+
background-color: var(--dark-bg);
86+
color: var(--color-white);
87+
padding: 0.25rem 1rem;
88+
min-width: 7rem;
89+
font-size: 1.2rem;
90+
91+
&:hover {
92+
color: var(--dark-bg);
93+
background-color: var(--color-transparent);
94+
border: 1px solid var(--dark-bg);
95+
}
96+
@include desktop {
97+
font-size: 1.2rem;
98+
}
99+
}
100+
101+
.logo {
102+
width: 4.5rem;
103+
@include transition(all 0.3s ease);
104+
cursor: pointer;
105+
106+
@include desktop {
107+
width: 11.25rem;
108+
}
109+
&:hover {
110+
opacity: 0.6;
111+
}
112+
}
113+
114+
.logoSticky {
115+
@extend .logo;
116+
width: 4.5rem;
117+
filter: brightness(0) saturate(100%);
118+
}
119+
120+
.links {
121+
display: none;
122+
padding: 1rem 0 2rem 0;
123+
margin: 0;
124+
position: relative;
125+
top: 4.5rem;
126+
127+
@include desktop {
128+
display: flex;
129+
flex-direction: row;
130+
align-items: center;
131+
position: static;
132+
padding: 0;
133+
}
134+
&.active {
135+
display: flex;
136+
flex-direction: column;
137+
align-items: center;
138+
width: 100%;
139+
position: absolute;
140+
left: 0;
141+
background-color: var(--color-white);
142+
color: var(--color-primary-content);
143+
box-shadow: var(--shadow-default);
144+
145+
@include desktop {
146+
flex-direction: row;
147+
position: static;
148+
width: auto;
149+
background-color: var(--dark-bg);
150+
color: var(--color-white);
151+
box-shadow: none;
152+
}
153+
}
154+
}
155+
156+
.linksSticky {
157+
@extend .links;
158+
@include desktop {
159+
background-color: var(--color-white);
160+
color: var(--color-primary-content);
161+
}
162+
}
163+
164+
.link {
165+
font-size: 1.2rem;
166+
line-height: 2.5;
167+
font-weight: 400;
168+
@include transition(all 0.3s ease);
169+
170+
@include large-desktop {
171+
font-size: 1.5rem;
172+
}
173+
174+
&:hover {
175+
font-weight: bold;
176+
}
177+
178+
&.current {
179+
font-weight: bold;
180+
}
181+
182+
&:after {
183+
display: block;
184+
letter-spacing: 1px;
185+
content: attr(title);
186+
font-weight: bold;
187+
height: 0;
188+
overflow: hidden;
189+
visibility: hidden;
190+
}
191+
}
192+
193+
.item {
194+
@include desktop {
195+
display: inline-block;
196+
margin-left: 6rem;
197+
}
198+
}
199+
200+
.hamburger {
201+
display: block;
202+
cursor: pointer;
203+
background: none;
204+
border: none;
205+
206+
@include desktop {
207+
display: none;
208+
}
209+
&.active span:nth-child(2) {
210+
opacity: 0;
211+
}
212+
&.active span:nth-child(1) {
213+
transform: translateY(8px) rotate(45deg);
214+
}
215+
&.active span:nth-child(3) {
216+
transform: translateY(-6px) rotate(-45deg);
217+
}
218+
}
219+
220+
.hamburgerBar {
221+
display: block;
222+
width: 25px;
223+
height: 2px;
224+
margin: 5px auto;
225+
@include transition(all 0.3s ease);
226+
background-color: var(--color-white);
227+
}
228+
229+
.hamburgerBarSticky {
230+
@extend .hamburgerBar;
231+
background-color: var(--color-primary-content);
232+
}

‎components/layout/Nav/index.js‎

Lines changed: 64 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,15 @@ import { useRouter } from 'next/router';
33
import Link from 'next/link';
44
import Container from '@/components/containers/Container';
55
import { linksNav } from '@/utils/links';
6-
import S from './styles';
6+
import styles from './Nav.module.scss';
77

88
export default function Nav() {
99
const router = useRouter();
1010
const [active, setActive] = useState(false);
1111
const [isSticky, setIsSticky] = useState(false);
1212
const headerRef = useRef();
1313
const containerRef = useRef();
14+
const DESKTOP_BREAKPOINT = 1024;
1415

1516
useEffect(() => {
1617
const observer = new IntersectionObserver(
@@ -25,7 +26,7 @@ export default function Nav() {
2526
{
2627
threshold: 0,
2728
rootMargin: '300px',
28-
}
29+
},
2930
);
3031

3132
if (headerRef.current) {
@@ -51,59 +52,91 @@ export default function Nav() {
5152
};
5253
}, []);
5354

55+
useEffect(() => {
56+
const handleResize = () => {
57+
if (window.innerWidth > DESKTOP_BREAKPOINT) {
58+
setActive(false);
59+
}
60+
};
61+
62+
window.addEventListener('resize', handleResize);
63+
return () => {
64+
window.removeEventListener('resize', handleResize);
65+
};
66+
}, []);
67+
5468
return (
55-
<S.Header ref={headerRef}>
69+
<header className={styles.header} ref={headerRef}>
5670
<Container>
57-
<S.NavWrapper ref={containerRef} $isSticky={isSticky}>
58-
<S.Nav $isSticky={isSticky}>
71+
<div
72+
ref={containerRef}
73+
className={isSticky ? styles.navWrapperSticky : ''}
74+
>
75+
<nav className={isSticky ? styles.navSticky : styles.nav}>
5976
<Link href='/'>
60-
<S.Logo
61-
$isSticky={isSticky}
77+
<img
78+
className={isSticky ? styles.logoSticky : styles.logo}
6279
src='/images/svg/logo.svg'
6380
alt='Logo'
6481
title='Go to the Homepage'
6582
/>
6683
</Link>
67-
<S.Links
68-
className={`${active ? 'active' : ''}`}
69-
$isSticky={isSticky}
84+
<ul
85+
className={`
86+
${active ? styles.active : ''}
87+
${isSticky ? styles.linksSticky : styles.links}
88+
`}
7089
>
7190
{linksNav.map(({ text, href, id }) => {
7291
return (
73-
<S.Item key={id}>
74-
<S.Link
92+
<li className={styles.item} key={id}>
93+
<a
7594
href={href}
76-
className={`${router.pathname == href ? `current` : ''}`}
95+
className={`${styles.link} ${router.pathname === href ? styles.current : ''}`}
7796
title={text}
7897
>
7998
{text}
80-
</S.Link>
81-
</S.Item>
99+
</a>
100+
</li>
82101
);
83102
})}
84-
<S.Item>
85-
<S.Button
86-
$isSticky={isSticky}
103+
<li className={styles.item}>
104+
<a
87105
href='mailto:hello@webdevpath.co?subject=Project collaborator application'
88-
className={`${active ? `active` : ''}`}
106+
className={`
107+
${active ? styles.active : ''}
108+
${isSticky ? styles.buttonSticky : styles.button}
109+
`}
89110
title='Join us'
90111
>
91112
Join us
92-
</S.Button>
93-
</S.Item>
94-
</S.Links>
95-
<S.Hamburger
96-
className={`${active ? `active` : ''}`}
113+
</a>
114+
</li>
115+
</ul>
116+
<button
117+
className={`${styles.hamburger} ${active ? styles.active : ''}`}
97118
onClick={() => setActive(active => !active)}
98119
aria-label='toggle navigation'
99120
>
100-
<S.HamburgerBar $isSticky={isSticky}></S.HamburgerBar>
101-
<S.HamburgerBar $isSticky={isSticky}></S.HamburgerBar>
102-
<S.HamburgerBar $isSticky={isSticky}></S.HamburgerBar>
103-
</S.Hamburger>
104-
</S.Nav>
105-
</S.NavWrapper>
121+
<span
122+
className={
123+
isSticky ? styles.hamburgerBarSticky : styles.hamburgerBar
124+
}
125+
></span>
126+
<span
127+
className={
128+
isSticky ? styles.hamburgerBarSticky : styles.hamburgerBar
129+
}
130+
></span>
131+
<span
132+
className={
133+
isSticky ? styles.hamburgerBarSticky : styles.hamburgerBar
134+
}
135+
></span>
136+
</button>
137+
</nav>
138+
</div>
106139
</Container>
107-
</S.Header>
140+
</header>
108141
);
109142
}

0 commit comments

Comments
 (0)