Skip to content

Commit 55c6cbb

Browse files
priyankarpalpriyankarpal
authored
Merge branch 'main' into fix-unused-vars
2 parents a7d0f80 + c53b9d4 commit 55c6cbb

22 files changed

Lines changed: 3114 additions & 41 deletions

.env.development renamed to .env.example

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,12 @@ DISABLE_ESLINT_PLUGIN=true
1010
REACT_APP_ACTIVITIES_ON=true
1111
REACT_APP_ACTIVITY_ID=hackrplay
1212
REACT_APP_DADJOKES_URL=https://jokeapi-v2.p.rapidapi.com/joke/
13-
REACT_APP_DADJOKES_APIKEY='b71df95c75msha446fab91d0e935p1d0262jsn1d938cb85502'
14-
REACT_APP_DADJOKES_APIHOST='jokeapi-v2.p.rapidapi.com'
13+
REACT_APP_DADJOKES_APIKEY=your_rapidapi_key_here
14+
REACT_APP_DADJOKES_APIHOST='jokeapi-v2.p.rapidapi.com'
15+
16+
# Add your API keys below:
17+
# REACT_APP_SEARCH_APIKEY=your_search_api_key
18+
# REACT_APP_TUBETUNES_APIKEY=your_tubetunes_api_key
19+
# REACT_APP_WEATHER_API_KEY=your_weather_api_key
20+
# REACT_APP_FIREBASE_API_KEY=your_firebase_api_key
21+
# REACT_APP_DIGITSDELIGHT_APIKEY=your_digitsdelight_api_key

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515

1616
# misc
1717
.env
18+
.env.development
1819
.DS_Store
1920
.env
2021
.env.local

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ Once forked, you can clone the repo by clicking the `Clone or Download` button o
8888

8989
Please change the directory after cloning the repository using the `cd <folder-name>` command.
9090

91-
> **Note:** Please do not remove the `.env.development` file from the root folder. It contains all the environment variables required for development.
91+
> **Note:** Copy `.env.example` to `.env.development` and add your API keys. The `.env.development` file is git-ignored to keep secrets secure.
9292
9393
### ⬇️ Install Dependencies
9494

‎netlify.toml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
[build]
2+
command = "npm run build"
3+
publish = "build"
4+
5+
[[headers]]
6+
for = "/*"
7+
[headers.values]
8+
X-Frame-Options = "DENY"
9+
110
[[redirects]]
211
from = "/*"
312
to = "/index.html"

‎src/common/header/Header.jsx‎

Lines changed: 47 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import HeaderNav from './HeaderNav';
2-
import { useEffect, useState } from 'react';
2+
import { useEffect, useRef, useState } from 'react';
33
import { Link, useLocation } from 'react-router-dom';
44
import Countdown from 'react-countdown';
55
import './header.css';
@@ -10,6 +10,50 @@ const Header = () => {
1010
const pathName = location.pathname;
1111

1212
const [reset, setReset] = useState({ search: false, filter: false });
13+
const [showNav, setShowNav] = useState(true);
14+
const lastScrollY = useRef(0);
15+
16+
useEffect(() => {
17+
const handleScroll = () => {
18+
const current = window.scrollY;
19+
20+
const hero = document.getElementById('hero');
21+
22+
if (hero) {
23+
const heroBottom = hero.getBoundingClientRect().bottom;
24+
const headerHeight = 64; // your navbar height
25+
26+
const banner = document.querySelector('.activity-timer-banner');
27+
const bannerHeight = banner?.offsetHeight || 0;
28+
29+
if (heroBottom > headerHeight + bannerHeight) {
30+
setShowNav(true);
31+
lastScrollY.current = current;
32+
33+
return;
34+
}
35+
}
36+
37+
// after hero → direction based (with threshold)
38+
const SCROLL_THRESHOLD = 20;
39+
const diff = Math.abs(current - lastScrollY.current);
40+
41+
// ignore tiny scrolls
42+
if (diff < SCROLL_THRESHOLD) return;
43+
44+
if (current > lastScrollY.current) {
45+
setShowNav(false); // down
46+
} else {
47+
setShowNav(true); // up
48+
}
49+
50+
lastScrollY.current = current;
51+
};
52+
53+
window.addEventListener('scroll', handleScroll);
54+
55+
return () => window.removeEventListener('scroll', handleScroll);
56+
}, []);
1357

1458
useEffect(() => {
1559
if (location.state) {
@@ -95,7 +139,7 @@ const Header = () => {
95139
};
96140

97141
return (
98-
<>
142+
<div className={`nav-wrapper ${showNav ? 'nav--visible' : 'nav--hidden'}`}>
99143
{process.env.REACT_APP_ACTIVITIES_ON === 'true' && showHideBits.showActivityTimer && (
100144
<Countdown date={new Date(1675209600000)} renderer={activityTimerRenderer} />
101145
)}
@@ -122,7 +166,7 @@ const Header = () => {
122166

123167
<HeaderNav showBrowse={showHideBits.showBrowse} />
124168
</header>
125-
</>
169+
</div>
126170
);
127171
};
128172

‎src/common/header/HeaderNav.jsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -121,8 +121,16 @@ const HeaderNav = ({ showBrowse }) => {
121121
>
122122
<span className="navbar-toggler-icon" />
123123
</button>
124-
<div className={showToggleMenu ? 'navbar-collapse show' : 'navbar-collapse'}>
125-
<ul className="header-links" data-testid="header-links-container">
124+
<div
125+
className={showToggleMenu ? 'navbar-collapse show' : 'navbar-collapse'}
126+
role="presentation"
127+
onClick={() => setShowToggleMenu(false)}
128+
>
129+
<ul
130+
className="header-links"
131+
data-testid="header-links-container"
132+
onClick={(e) => e.stopPropagation()}
133+
>
126134
<li className="menu-closer">
127135
<button
128136
className="navbar-closer"

‎src/common/header/header.css‎

Lines changed: 70 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
.app-header {
2-
position: relative;
2+
/* position: fixed;
33
top: 0;
44
right: 0;
5-
left: 0;
5+
left: 0; */
6+
transition: transform 0.3s ease;
67
z-index: 10;
78
display: flex;
89
justify-content: space-between;
@@ -14,14 +15,33 @@
1415
padding: 0 1rem 0 0.6rem;
1516
}
1617

18+
.nav-wrapper {
19+
position: fixed;
20+
top: 0;
21+
left: 0;
22+
right: 0;
23+
z-index: 10;
24+
transition: transform 0.3s ease;
25+
}
26+
27+
.nav--hidden {
28+
transform: translateY(-100%);
29+
}
30+
31+
.nav--visible {
32+
transform: translateY(0);
33+
}
34+
35+
36+
1737
@media screen and (max-width: 768px) {
1838
.app-header {
1939
padding: 0 1rem 0 0.2rem;
2040
}
2141
}
2242

2343
.app-header-home {
24-
position: sticky;
44+
/* position: sticky; */
2545
}
2646

2747
.app-header-home.app-header-home--promo {
@@ -101,6 +121,51 @@
101121
display: none;
102122
}
103123

124+
@media screen and (max-width: 1217px) {
125+
.navbar-collapse {
126+
display: block !important;
127+
position: fixed;
128+
top: 0;
129+
right: 0;
130+
bottom: 0;
131+
left: 0;
132+
visibility: hidden;
133+
pointer-events: none;
134+
}
135+
136+
.navbar-collapse:before {
137+
content: '';
138+
background-color: var(--color-neutral-90);
139+
position: fixed;
140+
top: 0;
141+
right: 0;
142+
bottom: 0;
143+
left: 0;
144+
z-index: 0;
145+
opacity: 0;
146+
cursor: pointer;
147+
transition: opacity 0.3s ease;
148+
}
149+
150+
.navbar-collapse .header-links {
151+
transform: translateX(100%);
152+
transition: transform 0.3s ease;
153+
}
154+
155+
.navbar-collapse.show {
156+
visibility: visible;
157+
pointer-events: auto;
158+
}
159+
160+
.navbar-collapse.show:before {
161+
opacity: 60%;
162+
}
163+
164+
.navbar-collapse.show .header-links {
165+
transform: translateX(0);
166+
}
167+
}
168+
104169
@media (min-width: 1217px) {
105170
.navbar-toggler {
106171
display: none;
@@ -176,28 +241,7 @@
176241
}
177242

178243
@media screen and (max-width: 1217px) {
179-
.navbar-collapse.show {
180-
display: block;
181-
position: fixed;
182-
top: 0;
183-
right: 0;
184-
bottom: 0;
185-
left: 0;
186-
}
187-
188-
.navbar-collapse.show:before {
189-
content: '';
190-
background-color: var(--color-neutral-90);
191-
position: fixed;
192-
top: 0;
193-
right: 0;
194-
bottom: 0;
195-
left: 0;
196-
z-index: 0;
197-
opacity: 60%;
198-
}
199-
200-
.navbar-collapse.show .header-links {
244+
.navbar-collapse .header-links {
201245
position: absolute;
202246
top: 0;
203247
right: 0;
@@ -214,16 +258,13 @@
214258

215259
.navbar-collapse.show .header-links {
216260
align-items: stretch;
261+
grid-gap: 0.2rem;
217262
}
218263

219264
.navbar-collapse .menu-closer {
220265
display: block;
221266
}
222267

223-
.navbar-collapse.show .header-links {
224-
grid-gap: 0.2rem;
225-
}
226-
227268
.header-links > li.menu-spacer {
228269
margin: 0.4rem 0 1rem 0;
229270
}

‎src/common/home/Home.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import DefaultBanner from 'common/defaultBanner/DefaultBanner';
1212
const Home = () => {
1313
return (
1414
<main>
15-
<section className="app-home-body">
15+
<section className="app-home-body" id="hero">
1616
<DefaultBanner />
1717
</section>
1818
<section className="home-features">

0 commit comments

Comments
 (0)