Skip to content

Commit 7e06067

Browse files
octaviookumuoctaviookumu
committed
Makes navbar sticky [Fixes #137]
1 parent b691a83 commit 7e06067

4 files changed

Lines changed: 104 additions & 77 deletions

File tree

‎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/Navbar/Navbar.tsx‎

Lines changed: 82 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,96 @@
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+
window.addEventListener('scroll', handleScroll);
24+
return () => {
25+
window.removeEventListener('scroll', handleScroll);
26+
};
27+
}, []);
28+
929
return (
1030
<>
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>
31+
<div
32+
className={`transition-all duration-100 hidden md:block ${
33+
isScrolledToTop ? 'text-white' : 'text-black bg-white shadow-2xl'
34+
}`}
35+
>
36+
<header className="lg:pl-[49px] w-full bg-transparent">
37+
<nav className="nav py-4 pl-5 flex flex-col md:flex-row justify-around items-center">
38+
<div>
39+
<Link href={HOME}>
40+
<a>
41+
<Logo size={60} />
42+
</a>
43+
</Link>
44+
</div>
45+
<ul className="font-montserrat text-base flex flex-row justify-between items-center md:space-x-[30px]">
46+
<li>
47+
<a href={ABOUT}>About us</a>
48+
</li>
49+
<li>
50+
<a href={EVENTS}>Events</a>
51+
</li>
52+
<li>
53+
<a href={CONTACT}>Contact</a>
54+
</li>
3155
</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>
56+
<div>
57+
<LinkButton
58+
className="flex justify-center items-center bg-[#EC0505] w-[203px] h-[46px] rounded-md text-base text-white font-montserrat font-bold"
59+
href="https://bit.ly/joinreactdevske"
60+
target="_blank"
61+
rel="noopener noreferrer"
62+
>
63+
Join Community
64+
</LinkButton>
65+
</div>
66+
</nav>
67+
</header>
68+
</div>
69+
<div
70+
className={`px-6 py-2 flex justify-between md:hidden ${
71+
isScrolledToTop ? '' : 'bg-white shadow-2xl'
72+
}`}
73+
>
74+
<Link href={HOME}>
75+
<a>
76+
<Logo size={60} />
77+
</a>
78+
</Link>
79+
<a
80+
target="_blank"
81+
href="https://github.com/reactdeveloperske/reactdevske-website"
82+
rel="noopener noreferrer"
83+
className="pt-[13px]"
84+
>
85+
<Image
86+
src="/img/github-logo.svg"
87+
alt="github svg"
88+
width={35}
89+
height={35}
90+
/>
91+
</a>
92+
<DropdownMenu />
93+
</div>
4594
</>
4695
);
4796
}

‎src/pages/index.page.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import ContactUs from '../components/ContactUs';
44
import Events from '../components/Events/Events';
55
import MissionPillars from '../components/MissionPillars/MissionPillars';
66
import HeroHeader from '../components/HeroHeader';
7+
import Navbar from '../components/Navbar';
78

89
export default function Home() {
910
return (
@@ -21,6 +22,9 @@ export default function Home() {
2122
key="title"
2223
/>
2324
</Head>
25+
<div className="sticky top-0 z-10">
26+
<Navbar />
27+
</div>
2428
<main className="">
2529
<HeroHeader />
2630
<div className="flex flex-col py-12 bg-white">

0 commit comments

Comments
 (0)