Skip to content

Commit 7e81fb2

Browse files
manecipoglumanecipoglu
committed
Add Container component for consistent styling and change the navbar sticky appearance
1 parent e6f0dca commit 7e81fb2

File tree

5 files changed

+130
-93
lines changed

5 files changed

+130
-93
lines changed

‎components/Container.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { forwardRef } from 'react';
2+
import containerStyles from '../styles/Container.module.scss';
3+
4+
const Container = forwardRef((props, ref) => {
5+
const { className, styles, children } = props;
6+
return (
7+
<div
8+
className={`${className ? className : ''} ${containerStyles.container}`}
9+
styles={styles}
10+
ref={ref}
11+
>
12+
{children}
13+
</div>
14+
);
15+
});
16+
17+
export default Container;

‎components/Nav.js

Lines changed: 55 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,22 @@ import { useState, useEffect, useRef } from 'react';
22
import Link from 'next/link';
33
import Image from 'next/image';
44
import ButtonLink from './ButtonLink';
5+
import Container from './Container';
56
import styles from '../styles/Nav.module.scss';
7+
import { linksNav } from '../utils/links';
68

79
export default function Nav() {
810
const [active, setActive] = useState(false);
9-
const navRef = useRef();
1011
const headerRef = useRef();
12+
const containerRef = useRef();
1113

1214
useEffect(() => {
1315
const observer = new IntersectionObserver(
1416
([entry]) => {
1517
if (!entry.isIntersecting) {
16-
navRef.current.classList.add(styles.sticky);
18+
containerRef.current.classList.add(styles.sticky);
1719
} else {
18-
navRef.current.classList.remove(styles.sticky);
20+
containerRef.current.classList.remove(styles.sticky);
1921
}
2022
},
2123
{
@@ -37,60 +39,58 @@ export default function Nav() {
3739

3840
return (
3941
<header className={styles.header} ref={headerRef}>
40-
<nav className={styles.nav} ref={navRef}>
41-
<div className={styles.nav__logo}>
42-
<Link href="/" passHref>
43-
<a>
44-
<Image
45-
src="/images/svg/logo.svg"
46-
height={115.54}
47-
width={180}
48-
alt="Logo"
49-
/>
50-
</a>
51-
</Link>
52-
</div>
53-
<ul className={`${styles.nav__links} ${active ? styles.active : ''}`}>
54-
<li className={styles.nav__item}>
55-
<Link href="/about-us">
56-
<a className={styles.nav__link} title="About">
57-
About
42+
<Container className={styles.container} ref={containerRef}>
43+
<nav className={styles.nav}>
44+
<div className={styles.nav__logo}>
45+
<Link href="/" passHref>
46+
<a>
47+
<Image
48+
src="/images/svg/logo.svg"
49+
height={115.54}
50+
width={180}
51+
alt="Logo"
52+
/>
5853
</a>
5954
</Link>
60-
</li>
61-
<li className={styles.nav__item}>
62-
<Link href="/blog">
63-
<a className={styles.nav__link} title="Blog">
64-
Blog
65-
</a>
66-
</Link>
67-
</li>
68-
<li className={styles.nav__item}>
69-
<Link href="/contact-us">
70-
<a className={styles.nav__link} title="Contact">
71-
Contact
72-
</a>
73-
</Link>
74-
</li>
75-
<li className={styles.nav__item}>
76-
<ButtonLink
77-
className={`${styles.nav__button} ${active ? styles.active : ''}`}
78-
link="https://webdevpath.slack.com/join/shared_invite/zt-xqqgwwo5-a09BSVWC9ZrHmS6RaMBzVw#/shared-invite/email"
79-
>
80-
Join us
81-
</ButtonLink>
82-
</li>
83-
</ul>
84-
<button
85-
className={`${styles.nav__hamburger} ${active ? styles.active : ''}`}
86-
onClick={() => setActive(active => !active)}
87-
aria-label="toggle navigation"
88-
>
89-
<span className={styles.nav__hamburger__bar}></span>
90-
<span className={styles.nav__hamburger__bar}></span>
91-
<span className={styles.nav__hamburger__bar}></span>
92-
</button>
93-
</nav>
55+
</div>
56+
<ul className={`${styles.nav__links} ${active ? styles.active : ''}`}>
57+
{linksNav.map(({ text, href }) => {
58+
if (text !== 'Join us') {
59+
return (
60+
<li className={styles.nav__item}>
61+
<Link href={href}>
62+
<a className={styles.nav__link} title={text}>
63+
{text}
64+
</a>
65+
</Link>
66+
</li>
67+
);
68+
}
69+
})}
70+
<li className={styles.nav__item}>
71+
<ButtonLink
72+
className={`${styles.nav__button} ${
73+
active ? styles.active : ''
74+
}`}
75+
link="https://webdevpath.slack.com/join/shared_invite/zt-xqqgwwo5-a09BSVWC9ZrHmS6RaMBzVw#/shared-invite/email"
76+
>
77+
Join us
78+
</ButtonLink>
79+
</li>
80+
</ul>
81+
<button
82+
className={`${styles.nav__hamburger} ${
83+
active ? styles.active : ''
84+
}`}
85+
onClick={() => setActive(active => !active)}
86+
aria-label="toggle navigation"
87+
>
88+
<span className={styles.nav__hamburger__bar}></span>
89+
<span className={styles.nav__hamburger__bar}></span>
90+
<span className={styles.nav__hamburger__bar}></span>
91+
</button>
92+
</nav>
93+
</Container>
9494
</header>
9595
);
9696
}

‎styles/Container.module.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@use './variables' as *;
2+
3+
.container {
4+
margin: 0 auto;
5+
width: 90%;
6+
max-width: $large-desktop-breakpoint;
7+
}

‎styles/Nav.module.scss

Lines changed: 49 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,73 @@
11
@use './variables' as *;
22
@use './mixins' as *;
33

4-
.nav {
4+
.header {
55
color: $white;
66
background-color: $dark-bg-color;
7-
padding: 0 3rem;
7+
width: 100%;
8+
height: 4.5rem;
89
display: flex;
9-
justify-content: space-between;
1010
align-items: center;
11-
height: 4.5rem;
12-
width: 100%;
1311

1412
@include desktop {
1513
height: 12rem;
16-
padding: 2rem 5.5rem;
1714
}
15+
}
1816

19-
&.sticky {
20-
position: fixed;
21-
background-color: $white;
22-
color: $dark-bg-color;
23-
z-index: 2;
17+
.container.sticky {
18+
background-color: $white;
19+
width: 100%;
20+
display: flex;
21+
justify-content: center;
22+
position: fixed;
23+
top: 0;
24+
color: $dark-bg-color;
25+
z-index: 2;
26+
padding: 1rem 0;
27+
height: 4.5rem;
28+
box-shadow: rgb(0 0 0 / 5%) 0px 2px 4px 0px;
2429

25-
& span {
26-
background-color: $dark-bg-color;
27-
}
30+
& nav {
31+
width: 90%;
32+
}
2833

29-
& img {
30-
filter: brightness(0) saturate(100%);
31-
}
34+
& span {
35+
background-color: $dark-bg-color;
36+
}
3237

33-
& .nav__links {
34-
@include desktop {
35-
background-color: $white;
36-
color: $primary-content-color;
37-
}
38-
}
38+
& img {
39+
filter: brightness(0) saturate(100%);
40+
}
3941

40-
& .nav__button {
41-
@include desktop {
42-
background-color: $dark-bg-color;
43-
color: $white;
44-
}
45-
}
42+
& .nav__logo {
43+
width: 4.5rem;
44+
}
4645

47-
& .nav__btn a {
48-
@include desktop {
49-
color: $white;
50-
background-color: $dark-bg-color;
51-
}
46+
& .nav__links {
47+
@include desktop {
48+
background-color: $white;
49+
color: $primary-content-color;
5250
}
5351
}
5452

55-
&__btn {
56-
order: 2;
53+
& .nav__link {
54+
font-size: 1.2rem;
55+
}
56+
57+
& .nav__button {
58+
@include desktop {
59+
background-color: $dark-bg-color;
60+
color: $white;
61+
padding: 0.125rem;
62+
min-width: 7rem;
63+
}
5764
}
65+
}
66+
67+
.nav {
68+
display: flex;
69+
justify-content: space-between;
70+
align-items: center;
5871

5972
&__button {
6073
color: $dark-bg-color;

‎utils/links.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ export const linksNav = [
33
text: 'Join us',
44
href: 'https://webdevpath.slack.com/join/shared_invite/zt-xqqgwwo5-a09BSVWC9ZrHmS6RaMBzVw#/shared-invite/email',
55
},
6-
{ text: 'Blog', href: '/blog' },
76
{ text: 'About', href: '/about-us' },
8-
{ text: 'Contact us', href: '/contact-us' },
7+
{ text: 'Blog', href: '/blog' },
8+
{ text: 'Contact', href: '/contact-us' },
99
];
1010

1111
export const linksSocial = [

0 commit comments

Comments
 (0)