Skip to content

Commit da8cc3c

Browse files
CodeeeHubCodeeeHub
committed
Fix : Home page and Navbar and Change Logo of Html
1 parent 0440ce6 commit da8cc3c

File tree

4 files changed

+128
-110
lines changed

4 files changed

+128
-110
lines changed

‎index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
5+
<link rel="icon" type="image/svg+xml" href="./src/assets/Circles.png" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite + React + TS</title>
7+
<title>GYM</title>
88
</head>
99
<body>
1010
<div id="root"></div>

‎src/App.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ function App() {
1717
<div className="App">
1818
<div className="bg-gray-20">
1919
<Navbar currentPage={currentPage} setCurrentPage={setCurrentPage}/>
20-
<HomePage currentPage={currentPage} setCurrentPage={setCurrentPage} />
20+
<HomePage setCurrentPage={setCurrentPage} />
2121
</div>
2222
</div>
2323
</>

‎src/Components/Main page/HomePage.tsx

+3-6
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import React from "react";
21
//import Types
32
import { CurrentPage } from "@/Utils/CurrentPage";
43
//import ActionButton
@@ -11,15 +10,13 @@ import HomePageGraphic from "@/assets/HomePageGraphic.png";
1110
import SponserRedBull from "@/assets/SponsorRedBull.png";
1211
import SponserForbes from "@/assets/SponsorForbes.png";
1312
import SponserFortune from "@/assets/SponsorFortune.png";
14-
import Link from "../shared/Link";
1513
import AnchorLink from "react-anchor-link-smooth-scroll";
1614

1715
type Props = {
18-
currentPage: CurrentPage;
1916
setCurrentPage: (value: CurrentPage) => void;
2017
};
2118

22-
function HomePage({ currentPage, setCurrentPage }: Props) {
19+
function HomePage({setCurrentPage }: Props) {
2320
return (
2421
<motion.section
2522
id="home"
@@ -56,7 +53,7 @@ function HomePage({ currentPage, setCurrentPage }: Props) {
5653
setCurrentPage={setCurrentPage}
5754
/>
5855
<AnchorLink
59-
className="text-sm font-bold text-primary-500 hover:text-secondary-500 underline duration-150"
56+
className="text-sm cursor-pointer font-bold text-primary-500 hover:text-secondary-500 underline duration-150"
6057
onClick={() => setCurrentPage(CurrentPage.ContactUs)}
6158
href={`#${CurrentPage.ContactUs}`}
6259
>
@@ -80,7 +77,7 @@ function HomePage({ currentPage, setCurrentPage }: Props) {
8077
</motion.figure>
8178
</div>
8279
{/* Home => Sponser */}
83-
<div className="hidden md:block h-[150px] bg-primary-100 z-10 py-10 px-10 w-full">
80+
<div className="hidden md:block h-[150px] bg-primary-100 z-10 py-8 px-10 w-full">
8481
<div className="w-5/6 mx-auto flex items-center gap-60 ">
8582
<motion.figure
8683
initial="hidden"

‎src/Components/Main page/Navbar.tsx

+122-101
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { useState , useEffect } from "react";
1+
import { useState, useEffect } from "react";
22
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
33
import Logo from "@/assets/Logo.png";
44
import Link from "../shared/Link";
55
import { CurrentPage } from "@/Utils/CurrentPage";
66
import ActionButton from "../shared/ActionButton";
7-
import closeNavbar from '@/Context/CloseNavbar';
7+
import closeNavbar from "@/Context/CloseNavbar";
88

99
type Props = {
1010
currentPage: CurrentPage;
@@ -13,123 +13,144 @@ type Props = {
1313

1414
function Navbar({ currentPage, setCurrentPage }: Props) {
1515
const [isMenuToggles, setIsMenuToggles] = useState<boolean>(false);
16-
const [screenAbove1080 , setScreenAbove1080 ] = useState(false)
16+
const [screenAbove1080, setScreenAbove1080] = useState(false);
17+
const [isMoreThenZero, setIsMoreThenZero] = useState<boolean>(false);
1718

18-
useEffect(()=>{
19-
const handleSizeOfScreen = () =>{
20-
if(window.innerWidth > 1080){
21-
setScreenAbove1080(true)
22-
setIsMenuToggles(false)
23-
}else{
24-
setScreenAbove1080(false)
19+
useEffect(() => {
20+
const handleSizeOfScreen = () => {
21+
if (window.innerWidth > 1080) {
22+
setScreenAbove1080(true);
23+
setIsMenuToggles(false);
24+
} else {
25+
setScreenAbove1080(false);
2526
}
26-
}
27+
};
2728

28-
window.addEventListener("resize" , handleSizeOfScreen)
29+
window.addEventListener("resize", handleSizeOfScreen);
2930

30-
return () => window.removeEventListener("resize" , handleSizeOfScreen)
31+
return () => window.removeEventListener("resize", handleSizeOfScreen);
32+
}, []);
3133

32-
},[])
34+
useEffect(() => {
35+
const handleScroll = () => {
36+
if (window.scrollY > 0) {
37+
setIsMoreThenZero(true);
38+
setCurrentPage(CurrentPage.Home);
39+
} else if (window.scrollY === 0) {
40+
setIsMoreThenZero(false);
41+
}
42+
};
43+
44+
window.addEventListener("scroll", handleScroll);
45+
46+
return () => window.removeEventListener("scroll", handleScroll);
47+
}, []);
3348

3449
const isMobileScreen =
3550
!screenAbove1080 && isMenuToggles
3651
? "opacity-1 translate-x-6 "
3752
: "opacity-0 -translate-x-6 ";
3853

3954
return (
40-
<closeNavbar.Provider value={{
41-
isMenuToggles,
42-
setIsMenuToggles
43-
}}>
44-
<nav>
45-
<div className="fixed top-0 p-6 w-full z-30">
46-
<div className="w-5/6 mx-auto ">
47-
<div className="w-full gap-16 flex items-center justify-between ">
48-
{/* logo */}
49-
<figure className="">
50-
<img src={Logo} alt="Logo" />
51-
</figure>
52-
<div className="hidden md:flex w-full justify-between items-center gap-16 list-none text-sm ">
53-
{/* left side of navbar */}
54-
<div className="flex item-center justify-center gap-6 font-montserrat">
55-
<Link
56-
page="Home"
57-
currentPage={currentPage}
58-
setCurrentPage={setCurrentPage}
59-
/>
60-
<Link
61-
page="Benefits"
62-
currentPage={currentPage}
63-
setCurrentPage={setCurrentPage}
64-
/>
65-
<Link
66-
page="Our Classes"
67-
currentPage={currentPage}
68-
setCurrentPage={setCurrentPage}
69-
/>
70-
<Link
71-
page="Contact Us"
72-
currentPage={currentPage}
73-
setCurrentPage={setCurrentPage}
74-
/>
55+
<closeNavbar.Provider
56+
value={{
57+
isMenuToggles,
58+
setIsMenuToggles,
59+
}}
60+
>
61+
<nav>
62+
<div
63+
className={`fixed top-0 p-6 w-full z-30 ${isMoreThenZero ? "bg-primary-100 drop-shadow transition duration-150" : ""}`}
64+
>
65+
<div className="w-5/6 mx-auto ">
66+
<div className="w-full gap-16 flex items-center justify-between ">
67+
{/* logo */}
68+
<figure className="">
69+
<img src={Logo} alt="Logo" />
70+
</figure>
71+
<div className="hidden md:flex w-full justify-between items-center gap-16 list-none text-sm ">
72+
{/* left side of navbar */}
73+
<div className="flex item-center justify-center gap-6 font-montserrat">
74+
<Link
75+
page="Home"
76+
currentPage={currentPage}
77+
setCurrentPage={setCurrentPage}
78+
/>
79+
<Link
80+
page="Benefits"
81+
currentPage={currentPage}
82+
setCurrentPage={setCurrentPage}
83+
/>
84+
<Link
85+
page="Our Classes"
86+
currentPage={currentPage}
87+
setCurrentPage={setCurrentPage}
88+
/>
89+
<Link
90+
page="Contact Us"
91+
currentPage={currentPage}
92+
setCurrentPage={setCurrentPage}
93+
/>
94+
</div>
95+
{/* right side of navbar */}
96+
<div className="flex items-center justify-center gap-6 font-montserrat">
97+
<button>Sign In</button>
98+
<ActionButton
99+
setCurrentPage={setCurrentPage}
100+
target={CurrentPage.ContactUs}
101+
content="Become a Member "
102+
/>
103+
</div>
75104
</div>
76-
{/* right side of navbar */}
77-
<div className="flex items-center justify-center gap-6 font-montserrat">
78-
<button>Sign In</button>
79-
<ActionButton
80-
setCurrentPage={setCurrentPage}
81-
target={CurrentPage.ContactUs}
82-
content="Become a Member "
105+
{/* mobile menu button */}
106+
<button
107+
className="block md:hidden rounded-full bg-secondary-500 p-2"
108+
onClick={() => setIsMenuToggles(!isMenuToggles)}
109+
>
110+
<Bars3Icon
111+
className="w-6 h-6 text-white"
83112
/>
84-
</div>
113+
</button>
85114
</div>
86-
{/* mobile menu button */}
87-
<button className="block md:hidden rounded-full bg-secondary-500 p-2">
88-
<Bars3Icon
89-
className="w-6 h-6 text-white"
90-
onClick={() => setIsMenuToggles(!isMenuToggles)}
91-
/>
92-
</button>
93115
</div>
94116
</div>
95-
</div>
96-
{/*Mobile menu */}
97-
<div
98-
className={`${isMobileScreen} w-[300px] fixed right-0 bottom-0 h-full bg-primary-100 drop-shadow-xl z-40 duration-200`}
99-
>
100-
{/* close button */}
101-
<div className="w-full flex justify-end p-12">
102-
<XMarkIcon
103-
className="w-8 h-8 text-gray-400"
104-
onClick={() => setIsMenuToggles(!isMenuToggles)}
105-
/>
106-
</div>
107-
{/* links in the mobile menu */}
108-
<div className="flex flex-col mx-auto gap-6 w-full justify-center ml-[30%] text-2xl">
109-
<Link
110-
page="Home"
111-
currentPage={currentPage}
112-
setCurrentPage={setCurrentPage}
113-
/>
114-
<Link
115-
page="Benefits"
116-
currentPage={currentPage}
117-
setCurrentPage={setCurrentPage}
118-
/>
119-
<Link
120-
page="Our Classes"
121-
currentPage={currentPage}
122-
setCurrentPage={setCurrentPage}
123-
/>
124-
<Link
125-
page="Contact Us"
126-
currentPage={currentPage}
127-
setCurrentPage={setCurrentPage}
128-
/>
117+
{/*Mobile menu */}
118+
<div
119+
className={`${isMobileScreen} w-[300px] fixed right-0 bottom-0 h-full bg-primary-100 drop-shadow-xl z-40 duration-200`}
120+
>
121+
{/* close button */}
122+
<div className="w-full flex justify-end p-12">
123+
<XMarkIcon
124+
className="w-8 h-8 text-gray-400"
125+
onClick={() => setIsMenuToggles(!isMenuToggles)}
126+
/>
127+
</div>
128+
{/* links in the mobile menu */}
129+
<div className="flex flex-col mx-auto gap-6 w-full justify-center ml-[30%] text-2xl">
130+
<Link
131+
page="Home"
132+
currentPage={currentPage}
133+
setCurrentPage={setCurrentPage}
134+
/>
135+
<Link
136+
page="Benefits"
137+
currentPage={currentPage}
138+
setCurrentPage={setCurrentPage}
139+
/>
140+
<Link
141+
page="Our Classes"
142+
currentPage={currentPage}
143+
setCurrentPage={setCurrentPage}
144+
/>
145+
<Link
146+
page="Contact Us"
147+
currentPage={currentPage}
148+
setCurrentPage={setCurrentPage}
149+
/>
150+
</div>
129151
</div>
130-
</div>
131-
</nav>
132-
</closeNavbar.Provider>
152+
</nav>
153+
</closeNavbar.Provider>
133154
);
134155
}
135156

0 commit comments

Comments
 (0)