Skip to content

Commit a4dbeee

Browse files
thorrelltthorrellt
committed
add completed styles.js for Nav
1 parent f4f7978 commit a4dbeee

File tree

3 files changed

+284
-1
lines changed

3 files changed

+284
-1
lines changed

‎components/layout/Hero/Hero.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useState } from 'react';
22
import Image from 'next/image';
3-
import Nav from '@/components/layout/Nav';
3+
import Nav from '@/components/layout/Nav/Nav';
44
import Container from '@/components/containers/Container/Container';
55
import S from './styles';
66

‎components/layout/Nav.js renamed to ‎components/layout/Nav/Nav.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { linksNav } from '@/utils/links';
88
export default function Nav() {
99
const router = useRouter();
1010
const [active, setActive] = useState(false);
11+
const [isSticky, setIsSticky] = useState(false);
1112
const headerRef = useRef();
1213
const containerRef = useRef();
1314

@@ -17,8 +18,10 @@ export default function Nav() {
1718
if (!containerRef.current) return;
1819
if (!entry.isIntersecting) {
1920
containerRef.current.classList.add(styles.sticky);
21+
setIsSticky(true);
2022
} else {
2123
containerRef.current.classList.remove(styles.sticky);
24+
setIsSticky(false);
2225
}
2326
},
2427
{

‎components/layout/Nav/styles.js

Lines changed: 280 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,280 @@
1+
// @use './variables' as *;
2+
// @use './mixins' as *;
3+
4+
import styled, { css } from 'styled-components';
5+
import * as m from '@/styles/_mixins';
6+
import {
7+
$white,
8+
$transparent,
9+
$darkBgColor,
10+
$primaryContentColor,
11+
$primaryAccentColor,
12+
$headingFont,
13+
$boxShadow,
14+
$boxShadowBottom,
15+
$lgDesktopBreakpoint,
16+
} from '@/styles/_variables';
17+
18+
const Header = styled.header`
19+
color: ${$white};
20+
background-color: ${$transparent};
21+
width: 100%;
22+
display: flex;
23+
align-items: center;
24+
padding: 2rem 0;
25+
height: 4.5rem;
26+
z-index: 100;
27+
28+
//media query mixins
29+
${m.desktop(css`
30+
height: auto;
31+
`)}
32+
`;
33+
34+
const NavWrapper = styled.div`
35+
//check props for sticky behavior
36+
${props => (props.$isSticky ? NavWrapperSticky : '')}
37+
`;
38+
39+
const NavWrapperSticky = css`
40+
background-color: ${$white};
41+
width: 100%;
42+
display: flex;
43+
justify-content: center;
44+
position: fixed;
45+
top: 0;
46+
left: 0;
47+
z-index: 100;
48+
height: 4.5rem;
49+
box-shadow: ${$boxShadow};
50+
`;
51+
52+
const Nav = styled.nav`
53+
display: flex;
54+
justify-content: space-between;
55+
align-items: center;
56+
57+
&:hover {
58+
text-decoration: none;
59+
color: ${$white};
60+
background-color: ${$transparent};
61+
border: 1px solid ${$white};
62+
}
63+
64+
//media query mixins
65+
${m.desktop(css`
66+
font-size: 1.5rem;
67+
`)}
68+
69+
//check props for sticky behavior
70+
${props => (props.$isSticky ? NavSticky : '')}
71+
`;
72+
73+
const NavSticky = css`
74+
width: 90%;
75+
max-width: ${$lgDesktopBreakpoint};
76+
`;
77+
78+
const Button = styled.a`
79+
color: ${$darkBgColor};
80+
background-color: ${$white};
81+
min-width: 9rem;
82+
padding: 0.5rem 2rem;
83+
border-radius: 2rem;
84+
cursor: pointer;
85+
font-weight: bold;
86+
font-size: 1.2rem;
87+
text-align: center;
88+
display: inline-block;
89+
border: 1px solid ${$transparent};
90+
${m.transition('all 0.3s ease')};
91+
92+
&.active {
93+
color: ${$white};
94+
background-color: ${$darkBgColor};
95+
padding: 0.25rem 1rem;
96+
min-width: 7rem;
97+
font-size: 1.2rem;
98+
99+
&:hover {
100+
color: ${$darkBgColor};
101+
background-color: ${$transparent};
102+
border: 1px solid ${$darkBgColor};
103+
}
104+
}
105+
106+
//check props for sticky behavior
107+
${props => (props.$isSticky ? ButtonSticky : '')}
108+
`;
109+
110+
const ButtonSticky = css`
111+
background-color: ${$darkBgColor};
112+
color: ${$white};
113+
padding: 0.25rem 1rem;
114+
min-width: 7rem;
115+
font-size: 1.2rem;
116+
117+
&:hover {
118+
color: ${$darkBgColor};
119+
background-color: ${$transparent};
120+
border: 1px solid ${$darkBgColor};
121+
}
122+
`;
123+
124+
const Logo = styled.img`
125+
width: 4.5rem;
126+
${m.transition('opacity 0.3s ease')};
127+
cursor: pointer;
128+
129+
&:hover {
130+
opacity: 0.6;
131+
}
132+
133+
//media query mixins
134+
${m.desktop(css`
135+
width: 11.25rem;
136+
`)}
137+
138+
//check props for sticky behavior
139+
${props => (props.$isSticky ? LogoSticky : '')}
140+
`;
141+
142+
const LogoSticky = css`
143+
width: 4.5rem;
144+
filter: brightness(0) saturate(100%);
145+
`;
146+
147+
const Links = styled.ul`
148+
display: none;
149+
padding: 1rem 0 2rem 0;
150+
margin: 0;
151+
position: relative;
152+
top: 4.5rem;
153+
154+
//media query mixins
155+
${m.desktop(css`
156+
display: flex;
157+
flex-direction: row;
158+
align-items: center;
159+
position: static;
160+
padding: 0;
161+
`)}
162+
163+
&.active {
164+
display: flex;
165+
flex-direction: column;
166+
align-items: center;
167+
width: 100%;
168+
position: absolute;
169+
left: 0;
170+
background-color: ${$white};
171+
color: ${$primaryContentColor};
172+
box-shadow: ${$boxShadowBottom};
173+
174+
//media query mixins
175+
${m.desktop(css`
176+
flex-direction: row;
177+
position: static;
178+
width: auto;
179+
background-color: ${$darkBgColor};
180+
color: ${$white};
181+
box-shadow: none;
182+
`)}
183+
}
184+
185+
//check props for sticky behavior
186+
${props => (props.$isSticky ? LinksSticky : '')}
187+
`;
188+
189+
const LinksSticky = css`
190+
//media query mixins
191+
${m.desktop(css`
192+
background-color: ${$white};
193+
color: ${$primaryContentColor};
194+
`)}
195+
`;
196+
197+
const Link = styled.a`
198+
font-size: 1.2rem;
199+
line-height: 2.5;
200+
font-weight: 400;
201+
letter-spacing: 1px;
202+
@include transition(all 0.3s ease);
203+
204+
&:hover {
205+
font-weight: bold;
206+
letter-spacing: 0;
207+
}
208+
209+
&.current {
210+
font-weight: bold;
211+
}
212+
213+
&:after {
214+
display: block;
215+
letter-spacing: 1px;
216+
content: attr(title);
217+
font-weight: bold;
218+
height: 0;
219+
overflow: hidden;
220+
visibility: hidden;
221+
}
222+
223+
//media query mixins
224+
${m.largeDesktop(css`
225+
font-size: 1.5rem;
226+
`)}
227+
228+
//check props for sticky behavior
229+
${props => (props.$isSticky ? LinkSticky : '')}
230+
`;
231+
232+
const LinkSticky = css`
233+
font-size: 1.2rem;
234+
`;
235+
236+
const Item = styled.li`
237+
//media query mixins
238+
${m.desktop(css`
239+
display: inline-block;
240+
margin-left: 6rem;
241+
`)}
242+
`;
243+
244+
const Hamburger = styled.button`
245+
display: block;
246+
cursor: pointer;
247+
background: none;
248+
border: none;
249+
250+
//media query mixins
251+
${m.desktop(css`
252+
display: none;
253+
`)}
254+
255+
&.active &__bar:nth-child(2) {
256+
opacity: 0;
257+
}
258+
&.active &__bar:nth-child(1) {
259+
transform: translateY(8px) rotate(45deg);
260+
}
261+
&.active &__bar:nth-child(3) {
262+
transform: translateY(-6px) rotate(-45deg);
263+
}
264+
`;
265+
266+
const HamburgerBar = styled.span`
267+
display: block;
268+
width: 25px;
269+
height: 2px;
270+
margin: 5px auto;
271+
${m.transition('opacity 0.3s ease')};
272+
background-color: ${$white};
273+
274+
//check props for sticky behavior
275+
${props => (props.$isSticky ? HamburgerBarSticky : '')}
276+
`;
277+
278+
const HamburgerBarSticky = css`
279+
background-color: ${$primaryContentColor};
280+
`;

0 commit comments

Comments
 (0)