Skip to content

Commit aa418a2

Browse files
Satoshi-ShSatoshi-Sh
committed
Migrated Nav to scss
1 parent c5d318d commit aa418a2

4 files changed

Lines changed: 284 additions & 311 deletions

File tree

‎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: 50 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ 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();
@@ -25,7 +25,7 @@ export default function Nav() {
2525
{
2626
threshold: 0,
2727
rootMargin: '300px',
28-
}
28+
},
2929
);
3030

3131
if (headerRef.current) {
@@ -52,58 +52,77 @@ export default function Nav() {
5252
}, []);
5353

5454
return (
55-
<S.Header ref={headerRef}>
55+
<header className={styles.header} ref={headerRef}>
5656
<Container>
57-
<S.NavWrapper ref={containerRef} $isSticky={isSticky}>
58-
<S.Nav $isSticky={isSticky}>
57+
<div
58+
ref={containerRef}
59+
className={isSticky ? styles.navWrapperSticky : ''}
60+
>
61+
<nav className={isSticky ? styles.navSticky : styles.nav}>
5962
<Link href='/'>
60-
<S.Logo
61-
$isSticky={isSticky}
63+
<img
64+
className={isSticky ? styles.logoSticky : styles.logo}
6265
src='/images/svg/logo.svg'
6366
alt='Logo'
6467
title='Go to the Homepage'
6568
/>
6669
</Link>
67-
<S.Links
68-
className={`${active ? 'active' : ''}`}
69-
$isSticky={isSticky}
70+
<ul
71+
className={`
72+
${active ? styles.active : ''}
73+
${isSticky ? styles.linksSticky : styles.links}
74+
`}
7075
>
7176
{linksNav.map(({ text, href, id }) => {
7277
return (
73-
<S.Item key={id}>
74-
<S.Link
78+
<li className={styles.item} key={id}>
79+
<a
7580
href={href}
76-
className={`${router.pathname == href ? `current` : ''}`}
81+
className={`${styles.link} ${router.pathname === href ? styles.current : ''}`}
7782
title={text}
7883
>
7984
{text}
80-
</S.Link>
81-
</S.Item>
85+
</a>
86+
</li>
8287
);
8388
})}
84-
<S.Item>
85-
<S.Button
86-
$isSticky={isSticky}
89+
<li className={styles.item}>
90+
<a
8791
href='mailto:hello@webdevpath.co?subject=Project collaborator application'
88-
className={`${active ? `active` : ''}`}
92+
className={`
93+
${active ? styles.active : ''}
94+
${isSticky ? styles.buttonSticky : styles.button}
95+
`}
8996
title='Join us'
9097
>
9198
Join us
92-
</S.Button>
93-
</S.Item>
94-
</S.Links>
95-
<S.Hamburger
96-
className={`${active ? `active` : ''}`}
99+
</a>
100+
</li>
101+
</ul>
102+
<button
103+
className={`${styles.hamburger} ${active ? styles.active : ''}`}
97104
onClick={() => setActive(active => !active)}
98105
aria-label='toggle navigation'
99106
>
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>
107+
<span
108+
className={
109+
isSticky ? styles.hamburgerBarSticky : styles.hamburgerBar
110+
}
111+
></span>
112+
<span
113+
className={
114+
isSticky ? styles.hamburgerBarSticky : styles.hamburgerBar
115+
}
116+
></span>
117+
<span
118+
className={
119+
isSticky ? styles.hamburgerBarSticky : styles.hamburgerBar
120+
}
121+
></span>
122+
</button>
123+
</nav>
124+
</div>
106125
</Container>
107-
</S.Header>
126+
</header>
108127
);
109128
}

0 commit comments

Comments
 (0)