Skip to content

Commit 988ef41

Browse files
orama254orama254
authored
Merge pull request #138 from octaviookumu/make-navbar-sticky
Makes navbar sticky
2 parents b691a83 + 38b4523 commit 988ef41

File tree

8 files changed

+963
-171
lines changed

8 files changed

+963
-171
lines changed

‎package-lock.json‎

Lines changed: 801 additions & 42 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/AboutUs/AboutUs.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Fade } from "react-awesome-reveal"
1+
import { Fade } from 'react-awesome-reveal';
22

33
export default function AboutUs() {
44
return (
@@ -7,18 +7,18 @@ export default function AboutUs() {
77
className="flex flex-col max-w-2xl justify-center items-center self-center space-y-4 px-4"
88
>
99
<Fade direction="down">
10-
<h2 className="text-3xl md:text-6xl tracking-wide md:font-light uppercase">
11-
About Us
12-
</h2>
13-
<p className="hidden md:inline-block text-4xl font-bold ">
14-
Empowering great talent
10+
<h2 className="text-3xl md:text-6xl tracking-wide md:font-light uppercase">
11+
About Us
12+
</h2>
13+
<p className="hidden md:inline-block text-4xl font-bold ">
14+
Empowering great talent
15+
</p>
16+
<p className="sm:text-sm md:text-xl tracking-wide text-center space-y-4">
17+
We bring together people who are passionate about React JS and{' '}
18+
<br className="hidden md:display" />
19+
it&apos;s ecosystem. We are a community of full-stack developers,
20+
frontend developers and so much more
1521
</p>
16-
<p className="sm:text-sm md:text-xl tracking-wide text-center space-y-4">
17-
We bring together people who are passionate about React JS and{' '}
18-
<br className="hidden md:display" />
19-
it&apos;s ecosystem. We are a community of full-stack developers,
20-
frontend developers and so much more
21-
</p>
2222
</Fade>
2323
</section>
2424
);

‎src/components/Events/Events.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Link from 'next/link';
22
import type { EventData } from '../../types/index';
33
import DisplayRC from './DisplayRC';
4-
import {Fade} from "react-awesome-reveal"
4+
import { Fade } from 'react-awesome-reveal';
55

66
const events: EventData[] = [
77
{
@@ -66,11 +66,11 @@ export default function Events() {
6666
id="events"
6767
className="relative flex flex-col items-center justify-center w-full py-16 bg-white md:py-20 gap-y-2 md:gap-y-5"
6868
>
69-
<Fade direction='down'>
70-
<h2 className="flex text-2xl items-center justify-center font-light tracking-wide">
71-
Events
72-
</h2>
73-
<h2 className="pb-2 text-2xl font-bold md:pb-10">Community Events</h2>
69+
<Fade direction="down">
70+
<h2 className="flex text-2xl items-center justify-center font-light tracking-wide">
71+
Events
72+
</h2>
73+
<h2 className="pb-2 text-2xl font-bold md:pb-10">Community Events</h2>
7474
</Fade>
7575
<div className="grid grid-cols-1 gap-y-4 md:gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8 md:grid-cols-2 bg-[#09AFC6] px-4 md:px-10 lg:px-16 py-8 md:py-14 xl:py-16">
7676
{events.map((event) => (

‎src/components/HeroHeader/DesktopHero.tsx‎

Lines changed: 18 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import Image from 'next/image';
22
import React from 'react';
3-
import Navbar from '../Navbar';
43
import LinkButton from '../LinkButton/LinkButton';
5-
import {Fade} from "react-awesome-reveal"
4+
import { Fade } from 'react-awesome-reveal';
65

76
export default function HeroHeader() {
87
return (
@@ -14,29 +13,26 @@ export default function HeroHeader() {
1413
layout="fill"
1514
className="-z-10 fixed top-0 opacity-[0.85] bg-[#333333]"
1615
/>
17-
<div className="relative">
18-
<Navbar />
19-
</div>
2016
<div className="w-full flex flex-col items-center justify-center z-10">
21-
<Fade direction='down'>
22-
<h1 className="font-montserrat font-bold text-center text-white text-[40px] leading-10 w-[388px] mx-auto mt-20">
23-
React Developer Community Kenya
24-
</h1>
25-
<p className="font-montserrat text-white w-[570px] mx-auto text-center mt-5 mb-[45px]">
26-
We are a tech community in Kenya focused on the React JS library and
27-
its ecosystem.
17+
<Fade direction="down">
18+
<h1 className="font-montserrat font-bold text-center text-white text-[40px] leading-10 w-[388px] mx-auto mt-20">
19+
React Developer Community Kenya
20+
</h1>
21+
<p className="font-montserrat text-white w-[570px] mx-auto text-center mt-5 mb-[45px]">
22+
We are a tech community in Kenya focused on the React JS library and
23+
its ecosystem.
2824
</p>
29-
<div className="flex items-center justify-center mb-44 relative">
30-
<LinkButton
31-
className="flex justify-center items-center bg-[#EC0505] w-[307px] h-[61px] rounded-md text-white font-montserrat font-bold"
32-
href="https://bit.ly/joinreactdevske"
33-
target="_blank"
34-
rel="noopener noreferrer"
35-
>
36-
Join ReactDevsKe
37-
</LinkButton>
25+
<div className="flex items-center justify-center mb-44 relative">
26+
<LinkButton
27+
className="flex justify-center items-center bg-[#EC0505] w-[307px] h-[61px] rounded-md text-white font-montserrat font-bold"
28+
href="https://bit.ly/joinreactdevske"
29+
target="_blank"
30+
rel="noopener noreferrer"
31+
>
32+
Join ReactDevsKe
33+
</LinkButton>
3834
</div>
39-
</Fade>
35+
</Fade>
4036
</div>
4137
</div>
4238
);

‎src/components/HeroHeader/MobileHero.tsx‎

Lines changed: 0 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,9 @@
1-
import Image from 'next/image';
21
import React from 'react';
3-
import Logo from '../Logo';
4-
import githubIcon from '../../../public/img/github-logo.svg';
5-
import DropdownMenu from './DropdownMenu';
62
import LinkButton from '../LinkButton/LinkButton';
7-
import Link from 'next/link';
8-
import { HOME } from '../../util/routeConstants';
93

104
export default function MobileHero() {
115
return (
126
<div className="relative">
13-
<div className="mx-6 pt-2 pb-5 flex justify-between">
14-
<Link href={HOME}>
15-
<a>
16-
<Logo size={60} />
17-
</a>
18-
</Link>
19-
<a
20-
target="_blank"
21-
href="https://github.com/reactdeveloperske/reactdevske-website"
22-
rel="noopener noreferrer"
23-
className="pt-[13px]"
24-
>
25-
<Image src={githubIcon} alt="" width={35} height={35} />
26-
</a>
27-
<DropdownMenu />
28-
</div>
297
<div>
308
<h1 className="font-robotoMono font-medium text-4xl text-center mb-2">
319
ReactDevsKe

‎src/components/MissionPillars/MissionPillars.tsx‎

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Image from 'next/image';
22
import Pillar from '../Pillar/Pillar';
3-
import {Fade} from "react-awesome-reveal"
3+
import { Fade } from 'react-awesome-reveal';
44

55
export default function MissionPillars() {
66
return (
@@ -11,65 +11,65 @@ export default function MissionPillars() {
1111
<div className="flex flex-col md:flex-row md:items-center md:justify-center w-full px-6 space-y-4 md:space-x-6">
1212
<div className="flex">
1313
<Fade direction="left">
14-
<Pillar count="01" label="Mentorship" />
14+
<Pillar count="01" label="Mentorship" />
1515
</Fade>
1616
</div>
1717
<div className="flex justify-end w-full md:w-2/5 lg:w-1/4">
1818
<div className="flex w-1/2 md:w-full">
1919
<div className="w-full overflow-hidden aspect-w-4 aspect-h-3">
20-
<Fade direction='right'>
21-
<Image
22-
src={
23-
'https://res.cloudinary.com/reactjs-devs-ke/image/upload/v1678532588/website-images/mentorship-image_tz0mor.jpg'
24-
}
25-
alt="Mentorship Image"
26-
layout="fill"
27-
/>
28-
</Fade>
20+
<Fade direction="right">
21+
<Image
22+
src={
23+
'https://res.cloudinary.com/reactjs-devs-ke/image/upload/v1678532588/website-images/mentorship-image_tz0mor.jpg'
24+
}
25+
alt="Mentorship Image"
26+
layout="fill"
27+
/>
28+
</Fade>
2929
</div>
3030
</div>
3131
</div>
3232
</div>
3333
<div className="flex flex-col md:flex-row-reverse md:items-center md:justify-center w-full px-6 space-y-4 md:space-x-6 md:space-x-reverse">
3434
<div className="flex justify-end">
35-
<Fade direction='right'>
36-
<Pillar count="02" label="Learning" />
37-
</Fade>
35+
<Fade direction="right">
36+
<Pillar count="02" label="Learning" />
37+
</Fade>
3838
</div>
3939
<div className="flex md:justify-start w-full md:w-2/5 lg:w-1/4">
4040
<div className="flex w-1/2 md:w-full">
4141
<div className="w-full overflow-hidden aspect-w-4 aspect-h-3">
42-
<Fade direction='left'>
43-
<Image
44-
src={
45-
'https://res.cloudinary.com/reactjs-devs-ke/image/upload/v1678532588/website-images/learning-image_eylqwm.jpg'
46-
}
47-
alt="Learning Image"
48-
layout="fill"
49-
/>
50-
</Fade>
42+
<Fade direction="left">
43+
<Image
44+
src={
45+
'https://res.cloudinary.com/reactjs-devs-ke/image/upload/v1678532588/website-images/learning-image_eylqwm.jpg'
46+
}
47+
alt="Learning Image"
48+
layout="fill"
49+
/>
50+
</Fade>
5151
</div>
5252
</div>
5353
</div>
5454
</div>
5555
<div className="flex flex-col md:flex-row md:items-center md:justify-center w-full px-6 space-y-4 md:space-x-6">
5656
<div className="flex">
57-
<Fade direction='left'>
58-
<Pillar count="03" label="Community" />
57+
<Fade direction="left">
58+
<Pillar count="03" label="Community" />
5959
</Fade>
6060
</div>
6161
<div className="flex justify-end w-full md:w-2/5 lg:w-1/4 ">
6262
<div className="flex w-1/2 md:w-full">
6363
<div className="w-full overflow-hidden aspect-w-4 aspect-h-3">
64-
<Fade direction='right'>
65-
<Image
66-
src={
67-
'https://res.cloudinary.com/reactjs-devs-ke/image/upload/v1678532588/website-images/community-image_pkeqwj.jpg'
68-
}
69-
alt="Community Image"
70-
layout="fill"
71-
/>
72-
</Fade>
64+
<Fade direction="right">
65+
<Image
66+
src={
67+
'https://res.cloudinary.com/reactjs-devs-ke/image/upload/v1678532588/website-images/community-image_pkeqwj.jpg'
68+
}
69+
alt="Community Image"
70+
layout="fill"
71+
/>
72+
</Fade>
7373
</div>
7474
</div>
7575
</div>

‎src/components/Navbar/Navbar.tsx‎

Lines changed: 88 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,102 @@
11
import React from 'react';
22
import Link from 'next/link';
33
import Logo from '../Logo/Logo';
4+
import Image from 'next/image';
45

6+
import { useState, useEffect } from 'react';
57
import { ABOUT, CONTACT, EVENTS, HOME } from '../../util/routeConstants';
68
import LinkButton from '../LinkButton/LinkButton';
9+
import DropdownMenu from '../HeroHeader/DropdownMenu';
710

811
export default function Navbar() {
12+
const [isScrolledToTop, setIsScrolledToTop] = useState(false);
13+
14+
const handleScroll = () => {
15+
if (window.scrollY === 0) {
16+
setIsScrolledToTop(true);
17+
} else {
18+
setIsScrolledToTop(false);
19+
}
20+
};
21+
22+
useEffect(() => {
23+
if (window.scrollY === 0) {
24+
setIsScrolledToTop(true);
25+
}
26+
window.addEventListener('scroll', handleScroll);
27+
return () => {
28+
window.removeEventListener('scroll', handleScroll);
29+
};
30+
}, []);
31+
932
return (
1033
<>
11-
<header className="lg:pl-[49px] w-full bg-transparent">
12-
<nav className="nav py-4 pl-5 flex flex-col md:flex-row justify-around items-center">
13-
<div>
14-
<Link href={HOME}>
15-
<a>
16-
<Logo size={60} />
17-
</a>
18-
</Link>
19-
</div>
20-
<div className="">
21-
<ul className="font-montserrat text-base text-white flex flex-row justify-between items-center md:space-x-[30px]">
22-
<a href={ABOUT}>
23-
<li>About us</li>
24-
</a>
25-
<a href={EVENTS}>
26-
<li>Events</li>
27-
</a>
28-
<a href={CONTACT}>
29-
<li>Contact</li>
30-
</a>
34+
{/* Desktop Navbar */}
35+
<div
36+
className={`transition-all duration-100 hidden md:block ${
37+
isScrolledToTop ? 'text-white' : 'text-black bg-white shadow-2xl'
38+
}`}
39+
>
40+
<header className="lg:pl-[49px] w-full bg-transparent">
41+
<nav className="nav py-4 pl-5 flex flex-col md:flex-row justify-around items-center">
42+
<div>
43+
<Link href={HOME}>
44+
<a>
45+
<Logo size={60} />
46+
</a>
47+
</Link>
48+
</div>
49+
<ul className="font-montserrat text-base flex flex-row justify-between items-center md:space-x-[30px]">
50+
<li>
51+
<a href={ABOUT}>About us</a>
52+
</li>
53+
<li>
54+
<a href={EVENTS}>Events</a>
55+
</li>
56+
<li>
57+
<a href={CONTACT}>Contact</a>
58+
</li>
3159
</ul>
32-
</div>
33-
<div>
34-
<LinkButton
35-
className="flex justify-center items-center bg-[#EC0505] w-[203px] h-[46px] rounded-md text-base text-white font-montserrat font-bold"
36-
href="https://bit.ly/joinreactdevske"
37-
target="_blank"
38-
rel="noopener noreferrer"
39-
>
40-
Join Community
41-
</LinkButton>
42-
</div>
43-
</nav>
44-
</header>
60+
<div>
61+
<LinkButton
62+
className="flex justify-center items-center bg-[#EC0505] w-[203px] h-[46px] rounded-md text-base text-white font-montserrat font-bold"
63+
href="https://bit.ly/joinreactdevske"
64+
target="_blank"
65+
rel="noopener noreferrer"
66+
>
67+
Join Community
68+
</LinkButton>
69+
</div>
70+
</nav>
71+
</header>
72+
</div>
73+
74+
{/* Mobile Navbar */}
75+
<div
76+
className={`px-6 py-2 flex justify-between md:hidden ${
77+
isScrolledToTop ? '' : 'bg-white shadow-2xl'
78+
}`}
79+
>
80+
<Link href={HOME}>
81+
<a>
82+
<Logo size={60} />
83+
</a>
84+
</Link>
85+
<a
86+
target="_blank"
87+
href="https://github.com/reactdeveloperske/reactdevske-website"
88+
rel="noopener noreferrer"
89+
className="pt-[13px]"
90+
>
91+
<Image
92+
src="/img/github-logo.svg"
93+
alt="github svg"
94+
width={35}
95+
height={35}
96+
/>
97+
</a>
98+
<DropdownMenu />
99+
</div>
45100
</>
46101
);
47102
}

0 commit comments

Comments
 (0)