Skip to content

Commit 58dfc91

Browse files
orama254orama254
authored
Merge pull request #145 from Muchael123/fix-header
Make the header sticky in mobile screen
2 parents 7b0e4f3 + adc5b03 commit 58dfc91

6 files changed

Lines changed: 52 additions & 52 deletions

File tree

‎src/components/Events/Events.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export default function Events() {
6363
>
6464

6565
<h2 className="pb-2 text-3xl text-white font-bold md:pb-10">Community Events</h2>
66-
<div className="grid grid-cols-1 gap-y-4 md:gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-3 xl:gap-x-8 md:grid-cols-2 px-4 md:px-10 lg:px-16 py-8 md:py-14 xl:py-16">
66+
<div className="grid grid-cols-1 gap-y-4 md:gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-3 xl:gap-x-8 md:grid-cols-2 px-4 md:px-10 lg:px-16 pt-8 md:pt-14 xl:pt-16">
6767
{events.map((event) => (
6868
<DisplayRC
6969
key={event.id}
@@ -74,18 +74,17 @@ export default function Events() {
7474
target={event.target}
7575
/>
7676
))}
77-
78-
<div className="flex items-center justify-center pt-1 tracking-wide text-white md:pt-0 md:text-right md:absolute md:bottom-24 md:right-10 2xl:bottom-26 lg:right-16">
77+
</div>
78+
<div className="flex items-start justify-center md:justify-end tracking-wide mt-4 px-4 md:px-10 lg:px-16 w-full text-white pb-10 md:pb-14 xl:pb-16">
7979
<Link href="https://kommunity.com/reactjs-developer-community-kenya-reactdevske/events">
8080
<a
8181
target="_blank"
82-
className="bg-[#61dafb] text-black px-6 py-3 rounded-full font-semibold text-lg hover:bg-[#48cae4] transition duration-300 ease-in-out hover:scale-105 hover:shadow-lg"
82+
className="bg-[#61dafb] text-black px-6 w-full max-w-[350px] text-center py-3 rounded-md font-semibold text-lg hover:bg-[#48cae4] transition duration-300 ease-in-out hover:scale-105 hover:shadow-lg"
8383
>
8484
See More Events
8585
</a>
8686
</Link>
8787
</div>
88-
</div>
8988
</section>
9089
);
9190
}

‎src/components/HeroHeader/DesktopHero.tsx‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,27 @@
11
import React from 'react';
2-
import Navbar from '../Navbar';
32
import LinkButton from '../LinkButton/LinkButton';
43

54
export default function HeroHeader() {
65
return (
76
<div
8-
className="relative bg-cover bg-center bg-no-repeat"
7+
className="relative bg-cover bg-center bg-no-repeat"
98
style={{
109
backgroundImage: `url('/images/hero-image.jpg')`,
1110
backgroundColor: '#160c0c',
1211

1312
}}
1413
>
15-
<div className="relative">
16-
<Navbar />
17-
</div>
18-
<div className="w-full flex flex-col items-center justify-center z-10 bg-black bg-opacity-30">
14+
15+
<div className="w-full flex py-20 flex-col items-center justify-center z-10 bg-black bg-opacity-80">
1916
<h1 className="font-montserrat font-bold text-center text-white text-[40px] leading-10 w-[388px] mx-auto mt-24">
2017
React Developer Community Kenya
2118
</h1>
2219
<p className="font-montserrat text-white w-[570px] mx-auto text-center mt-5 mb-[45px]">
2320
We are a tech community in Kenya focused on the React JS library and its ecosystem.
2421
</p>
25-
<div className="flex items-center justify-center mb-44 relative">
22+
<div className="flex items-center justify-center relative">
2623
<LinkButton
27-
className="flex justify-center items-center bg-[#EC0505] w-[307px] h-[61px] rounded-md text-white font-montserrat font-bold"
24+
className="flex justify-center items-center bg-[#EC0505] hover:bg-[#e12e2e] transition-all duration:200 hover:scale-105 w-[307px] h-[61px] rounded-md text-white font-montserrat font-bold"
2825
href="https://bit.ly/joinreactdevske"
2926
target="_blank"
3027
rel="noopener noreferrer"

‎src/components/HeroHeader/MobileHero.tsx‎

Lines changed: 7 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,20 @@
1-
import Image from 'next/image';
1+
22
import React from 'react';
3-
import Logo from '../Logo';
4-
import githubIcon from '../../../public/img/github-logo.svg';
5-
import DropdownMenu from './DropdownMenu';
63
import LinkButton from '../LinkButton/LinkButton';
7-
import Link from 'next/link';
8-
import { HOME } from '../../util/routeConstants';
94
import backgroundImage from '/public/images/hero-image.jpg'; // Add your background image here
105

116
export default function MobileHero() {
127
return (
138
<div
14-
className="relative bg-black bg-cover bg-center text-white mt-0"
9+
className="flex items-center justify-center bg-black bg-cover bg-center text-white mt-0"
1510
style={{
1611
backgroundImage: `url(${backgroundImage.src})`
1712
}}
1813
>
19-
<div className="mx-6 pt- pb-5 flex justify-between">
20-
<Link href={HOME}>
21-
<a>
22-
<Logo size={60} />
23-
</a>
24-
</Link>
25-
<a
26-
target="_blank"
27-
href="https://github.com/reactdeveloperske/reactdevske-website"
28-
rel="noopener noreferrer"
29-
className="pt-[13px]"
30-
>
31-
<Image src={githubIcon} alt="GitHub Logo" width={35} height={35} />
32-
</a>
33-
<DropdownMenu />
34-
</div>
35-
<div className="bg-black bg-opacity-50 p-6 rounded-md"> {/* Adds opacity to make text more legible */}
14+
15+
<div
16+
className="bg-black pt-[20vh] h-full justify-end items-center pb-[5vh] flex-col bg-opacity-50 p-6 rounded-md flex bg-cover bg-center text-white mt-0"
17+
> {/* Adds opacity to make text more legible */}
3618
<h1 className="font-robotoMono font-medium text-2xl text-center mb-2 text-white">
3719
React Developer Community Kenya
3820
</h1>
@@ -41,7 +23,7 @@ export default function MobileHero() {
4123
href="https://bit.ly/joinreactdevske"
4224
target="_blank"
4325
rel="noopener noreferrer"
44-
className="flex justify-center items-center bg-[#12A04E] text-white w-44 rounded-md"
26+
className="flex justify-center items-center bg-[#12A04E] text-white px-10 py-2 rounded-md"
4527
>
4628
Join ReactJS Kenya
4729
</LinkButton>

src/components/HeroHeader/DropdownMenu.tsx renamed to src/components/Navbar/DropdownMenu.tsx

File renamed without changes.

‎src/components/Navbar/Navbar.tsx‎

Lines changed: 33 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,38 @@
1-
import React from 'react';
1+
import React, { useEffect, useState } from 'react';
22
import Link from 'next/link';
33
import Logo from '../Logo/Logo';
44

55
import { ABOUT, CONTACT, EVENTS, HOME } from '../../util/routeConstants';
66
import LinkButton from '../LinkButton/LinkButton';
7+
import DropdownMenu from './DropdownMenu';
78

89
export default function Navbar() {
10+
const [screenWidth, setScreenWidth] = useState<number | null>(null);
11+
12+
const breakpoint = 768;
13+
14+
useEffect(() => {
15+
setScreenWidth(window.innerWidth);
16+
17+
const handleResize = () => setScreenWidth(window.innerWidth);
18+
19+
window.addEventListener('resize', handleResize);
20+
21+
return () => window.removeEventListener('resize', handleResize);
22+
}, []);
23+
24+
if (!screenWidth) return null;
925
return (
10-
<>
11-
<header className="lg:pl-[49px] w-full fixed top-0 bg-black bg-opacity-50 z-10">
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>
26+
<header className="lg:pl-[49px] fixed top-0 backdrop-blur-md w-full bg-black text-white justify-between bg-opacity-50 z-10">
27+
<nav className="nav py-2 md:py-4 md:pl-5 flex flex-row justify-between md:justify-around px-4 items-center">
28+
<div className="">
29+
<Link href={HOME}>
30+
<a>
31+
<Logo size={60} />
32+
</a>
33+
</Link>
34+
</div>
35+
{screenWidth > breakpoint && (
2036
<div className="">
2137
<ul className="font-montserrat text-base text-white flex flex-row justify-between items-center md:space-x-[30px]">
2238
<a href={ABOUT}>
@@ -30,6 +46,8 @@ export default function Navbar() {
3046
</a>
3147
</ul>
3248
</div>
49+
)}
50+
{screenWidth > breakpoint && (
3351
<div>
3452
<LinkButton
3553
className="flex justify-center items-center bg-[#EC0505] w-[203px] h-[46px] rounded-md text-base text-white font-montserrat font-bold"
@@ -40,8 +58,9 @@ export default function Navbar() {
4058
Join Community
4159
</LinkButton>
4260
</div>
43-
</nav>
44-
</header>
45-
</>
61+
)}
62+
{screenWidth <= breakpoint && <DropdownMenu />}
63+
</nav>
64+
</header>
4665
);
4766
}

‎src/pages/index.page.tsx‎

Lines changed: 3 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 (
@@ -22,6 +23,8 @@ export default function Home() {
2223
/>
2324
</Head>
2425
<main className="">
26+
<Navbar />
27+
2528
<HeroHeader />
2629
<div className="flex flex-col py-12 bg-[#030e30] text-white">
2730
<AboutUs />

0 commit comments

Comments
 (0)