Skip to content

Commit 92ae481

Browse files
tiramisuuuuuuutiramisuuuuuuu
authored
Merge pull request #39 from include-davis/1-header-beniciojpadilla
1 header beniciojpadilla
2 parents fa6aa4a + a4418ad commit 92ae481

File tree

6 files changed

+100
-110
lines changed

6 files changed

+100
-110
lines changed

‎app/(pages)/_components/common/Hero/Hero.jsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React from 'react';
33
import styles from './Hero.module.scss';
44
import { usePathname } from 'next/navigation';
55
import clsx from 'clsx';
6+
import Navbar from '../Navbar/Navbar';
67

78
const Hero = ({ title, subtitle }) => {
89
const pathname = usePathname();
@@ -18,8 +19,9 @@ const Hero = ({ title, subtitle }) => {
1819

1920
return (
2021
<section className={backgroundClass}>
21-
<h1 className = {styles.h1}>{title}</h1>
22-
<p className = {styles.p}>{subtitle}</p>
22+
<Navbar />
23+
<h1 className={styles.h1}>{title}</h1>
24+
<p className={styles.p}>{subtitle}</p>
2325
</section>
2426
)
2527
};

‎app/(pages)/_components/common/Hero/Hero.module.scss‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@
22
.hero {
33
position: relative;
44
width: 100%;
5-
height: 982.8px;
6-
margin-top: -6.875rem; // pull hero up behind the navbar
7-
padding-top: 12.5rem; // prevent text from hiding behind navbar
5+
height: 900px;
86
display: flex;
97
flex-direction: column;
108
align-items: center;
@@ -14,6 +12,9 @@
1412

1513
background-repeat: no-repeat;
1614
background-position: bottom center;
15+
@include sm-phone {
16+
height: 920px;
17+
}
1718
}
1819

1920
.morning {
@@ -47,12 +48,12 @@
4748
linear-gradient(#1E3666, #3C6CCC);
4849
background-repeat: no-repeat, no-repeat;
4950
background-position: bottom center, top;
50-
background-size: max(1300px, 100%) auto, cover;
51+
background-size: max(1350px, 100%) auto, cover;
5152
@include sm-phone {
5253
background-image:
5354
url('/images/header/mobile_destress.svg'),
5455
linear-gradient(#1E3666, #3C6CCC);
55-
background-size: contain, cover;
56+
background-size: max(430px, 100%) auto, cover;
5657
}
5758
}
5859

@@ -64,14 +65,11 @@
6465

6566
.content {
6667
position: relative;
67-
//z-index: 1;
6868
text-align: center;
6969
color: var(--white);
70-
padding: 2rem;
7170
display: flex;
7271
flex-direction: column;
7372
align-items: center;
74-
padding-top: 254px;
7573
gap: 1.5rem;
7674
}
7775

@@ -84,13 +82,16 @@
8482
font-style: normal;
8583
font-weight: 400;
8684
line-height: normal;
85+
padding-top: 2rem;
86+
8787

8888
@include tablet {
89-
font-size: 3rem;
89+
font-size: 4rem;
9090
}
9191

9292
@include sm-phone {
9393
font-size: 2rem;
94+
padding-top: 5rem;
9495
}
9596
}
9697

‎app/(pages)/_components/common/Navbar/Navbar.jsx‎

Lines changed: 45 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,18 @@
11
'use client';
2-
import React from 'react';
2+
import React, { useState } from 'react';
33
import styles from './Navbar.module.scss';
44
import Link from 'next/link';
5-
import NavHamburger from './menu';
5+
import { LuMenu } from "react-icons/lu"
66
import { usePathname, useRouter } from 'next/navigation';
77

8-
98
const Navbar = () => {
109
const pathname = usePathname();
1110
const router = useRouter();
11+
const [isopen, setIsOpen] = useState(false)
1212

13-
const routeStyles = {
14-
"/home": styles["navbar-morning"],
15-
"/resources": styles["navbar-noon"],
16-
"/destress": styles["navbar-night"],
17-
"/contact": styles["navbar-contact"],
18-
};
19-
20-
const colorClass = routeStyles[pathname] || "";
13+
function toggle() {
14+
setIsOpen(!isopen)
15+
}
2116

2217
const handleClick = () => {
2318
if (pathname === '/') {
@@ -29,34 +24,45 @@ const Navbar = () => {
2924

3025

3126
return (
32-
<nav className={`${styles.navbar} ${colorClass}`}>
33-
<img
34-
src="/images/header/logo.svg"
35-
alt="Logo"
36-
className={styles["nav-logo"]}
37-
style={{opacity: pathname=="/contact" ? 0 : 1}}
38-
/>
39-
40-
<NavHamburger className={styles.hamburger} />
41-
42-
<ul className={styles["nav-links"]}>
43-
<li className={styles["nav-link"]}>
44-
<Link href="/">About Us</Link>
45-
</li>
46-
<li className={styles["nav-link"]}>
47-
<a onClick={handleClick} style={{ cursor: 'pointer' }}>Program</a>
48-
</li>
49-
<li className={styles["nav-link"]}>
50-
<Link href="/resources">Resources</Link>
51-
</li>
52-
<li className={styles["nav-link"]}>
53-
<Link href="/destress">De-stress</Link>
54-
</li>
55-
<li className={`${styles["nav-link"]} ${styles["nav-contact"]}`}>
56-
<Link href="/contact">Contact</Link>
57-
</li>
58-
</ul>
59-
</nav>
27+
<>
28+
<nav className={styles.navbar}>
29+
<img
30+
src="/images/header/logo.svg"
31+
alt="Logo"
32+
className={styles["nav-logo"]}
33+
style={{opacity: pathname=="/contact" ? 0 : 1}}
34+
/>
35+
36+
<ul className={styles["nav-links"]}>
37+
<li className={styles["nav-link"]}>
38+
<Link href="/">About Us</Link>
39+
</li>
40+
<li className={styles["nav-link"]}>
41+
<a onClick={handleClick} style={{ cursor: 'pointer' }}>Program</a>
42+
</li>
43+
<li className={styles["nav-link"]}>
44+
<Link href="/resources">Resources</Link>
45+
</li>
46+
<li className={styles["nav-link"]}>
47+
<Link href="/destress">De-stress</Link>
48+
</li>
49+
<li className={`${styles["nav-link"]} ${styles["nav-contact"]}`}>
50+
<Link href="/contact">Contact</Link>
51+
</li>
52+
</ul>
53+
54+
<button onClick={toggle} className={styles.hamburger}>
55+
<LuMenu size={40} color="white" />
56+
</button>
57+
</nav>
58+
59+
<div className={`${styles.mobileMenu} ${isopen ? styles.expand : styles.collapse}`}>
60+
<Link href="/" className={styles.menuLink}>About Us</Link>
61+
<Link href="/resources" className={styles.menuLink}>Resources</Link>
62+
<Link href="/destress" className={styles.menuLink}>De-stress</Link>
63+
<Link href="/contact" className={styles.menuLink}>Contact</Link>
64+
</div>
65+
</>
6066
);
6167
};
6268

‎app/(pages)/_components/common/Navbar/Navbar.module.scss‎

Lines changed: 38 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
// Import global styles
22

33
.navbar {
4-
position: absolute;
5-
top: 0;
4+
position: relative;
65
width: 100%;
76
z-index: 1000;
87
padding: 0.5rem 1rem;
@@ -15,16 +14,11 @@
1514

1615

1716
.nav-logo {
18-
width: 6.37rem;
1917
height: 5.563rem;
2018
aspect-ratio: 101.92/89.00;
2119

22-
@include tablet {
23-
height: 70px;
24-
}
25-
2620
@include sm-phone {
27-
height: 45px;
21+
height: 70px;
2822
}
2923
}
3024

@@ -59,8 +53,6 @@
5953

6054
.nav-link {
6155
a {
62-
width: 8.416rem;
63-
height: 2.289rem;
6456
flex-shrink: 0;
6557
text-decoration: none;
6658
transition: color 0.3s ease;
@@ -73,8 +65,7 @@
7365
line-height: normal;
7466

7567
&:hover {
76-
opacity: 0.7;
77-
68+
opacity: 0.7;
7869
}
7970
}
8071
}
@@ -102,35 +93,52 @@
10293
color: var(--black);
10394
}
10495

105-
.hamburgerDiv {
96+
.hamburger {
10697
display: none;
107-
position: relative;
10898
padding-right: 20px;
109-
99+
background-color: transparent;
100+
border: none;
101+
110102
@include tablet {
111103
display: block;
112104
}
113105
}
114106

115-
.hamburger {
116-
background-color: transparent;
117-
border: none;
118-
}
119-
120-
.menuLinks {
121-
position: absolute;
122-
right: -10px;
107+
.mobileMenu {
108+
display: none;
109+
position: relative;
110+
width: 100%;
123111

124-
display: flex;
125-
flex-direction: column;
112+
flex-direction: row;
126113
justify-content: center;
127114
align-items: center;
128-
row-gap: 20px;
129-
background-color: rgba(23, 23, 23, 0.726);
130-
padding: 20px;
131-
border-radius: 20px;
115+
column-gap: 20px;
116+
117+
padding-top: 5px;
118+
padding-bottom: 5px;
119+
background-color: rgba(217, 217, 217, 0.726);
120+
121+
overflow: hidden;
122+
transition: height 0.4s ease, opacity 0.3s ease;
123+
124+
@include tablet {
125+
display: flex;
126+
}
127+
}
128+
129+
.expand {
130+
height: 30px; /* Your known height */
131+
opacity: 1;
132+
}
133+
134+
.collapse {
135+
height: 0;
136+
opacity: 0;
132137
}
133138

134139
.menuLink {
135-
color: white;
140+
text-decoration: none;
141+
font-family: 'Jua';
142+
text-align: center;
143+
color: black;
136144
}

‎app/(pages)/_components/common/Navbar/menu.jsx‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎app/(pages)/layout.jsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,9 @@ export const metadata = {
2626
export default function RootLayout({ children }) {
2727
return (
2828
<html lang="en" className={`${jua.className} ${cairo.className}`}>
29-
<body><Navbar />
30-
{children}</body>
29+
<body>
30+
{children}
31+
</body>
3132
</html>
3233
)
3334
}

0 commit comments

Comments
 (0)