Skip to content

Commit e37f6a7

Browse files
FARZINzxFARZINzx
committed
Feat : NavBar
1 parent abb3e5a commit e37f6a7

34 files changed

+1704
-143
lines changed

‎package-lock.json

+1,402-11
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+12
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,30 @@
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13+
"@heroicons/react": "^2.1.1",
14+
"bootstrap": "^5.3.3",
15+
"framer-motion": "^11.0.8",
1316
"react": "^18.2.0",
17+
"react-anchor-link-smooth-scroll": "^1.0.12",
18+
"react-bootstrap": "^2.10.1",
1419
"react-dom": "^18.2.0"
1520
},
1621
"devDependencies": {
22+
"@types/node": "^20.11.24",
1723
"@types/react": "^18.2.56",
24+
"@types/react-anchor-link-smooth-scroll": "^1.0.5",
1825
"@types/react-dom": "^18.2.19",
1926
"@typescript-eslint/eslint-plugin": "^7.0.2",
2027
"@typescript-eslint/parser": "^7.0.2",
2128
"@vitejs/plugin-react": "^4.2.1",
29+
"autoprefixer": "^10.4.18",
2230
"eslint": "^8.56.0",
2331
"eslint-plugin-react-hooks": "^4.6.0",
2432
"eslint-plugin-react-refresh": "^0.4.5",
33+
"postcss": "^8.4.35",
34+
"prettier": "^3.2.5",
35+
"prettier-plugin-tailwindcss": "^0.5.12",
36+
"tailwindcss": "^3.4.1",
2537
"typescript": "^5.2.2",
2638
"vite": "^5.1.4"
2739
}

‎postcss.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎src/App.css

-42
This file was deleted.

‎src/App.tsx

+15-25
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,23 @@
1-
import { useState } from 'react'
2-
import reactLogo from './assets/react.svg'
3-
import viteLogo from '/vite.svg'
4-
import './App.css'
5-
1+
//import Components
2+
import Navbar from "@/Components/Main page/Navbar"
3+
import { useState } from "react"
4+
import { CurrentPage } from "./Utils/CurrentPage"
5+
66
function App() {
7-
const [count, setCount] = useState(0)
7+
8+
const [currentPage , setCurrentPage] = useState<CurrentPage>(
9+
CurrentPage.Home
10+
)
11+
12+
813

914
return (
1015
<>
11-
<div>
12-
<a href="https://vitejs.dev" target="_blank">
13-
<img src={viteLogo} className="logo" alt="Vite logo" />
14-
</a>
15-
<a href="https://react.dev" target="_blank">
16-
<img src={reactLogo} className="logo react" alt="React logo" />
17-
</a>
18-
</div>
19-
<h1>Vite + React</h1>
20-
<div className="card">
21-
<button onClick={() => setCount((count) => count + 1)}>
22-
count is {count}
23-
</button>
24-
<p>
25-
Edit <code>src/App.tsx</code> and save to test HMR
26-
</p>
16+
<div className="App">
17+
<div className="bg-gray-20">
18+
<Navbar currentPage={currentPage} setCurrentPage={setCurrentPage}/>
2719
</div>
28-
<p className="read-the-docs">
29-
Click on the Vite and React logos to learn more
30-
</p>
20+
</div>
3121
</>
3222
)
3323
}

‎src/Components/Main page/Navbar.tsx

+136
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
import { useState , useEffect } from "react";
2+
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
3+
import Logo from "@/assets/Logo.png";
4+
import Link from "../shared/Link";
5+
import { CurrentPage } from "@/Utils/CurrentPage";
6+
import ActionButton from "../shared/ActionButton";
7+
import closeNavbar from '@/Context/CloseNavbar';
8+
9+
type Props = {
10+
currentPage: CurrentPage;
11+
setCurrentPage: (value: CurrentPage) => void;
12+
};
13+
14+
function Navbar({ currentPage, setCurrentPage }: Props) {
15+
const [isMenuToggles, setIsMenuToggles] = useState<boolean>(false);
16+
const [screenAbove1080 , setScreenAbove1080 ] = useState(false)
17+
18+
useEffect(()=>{
19+
const handleSizeOfScreen = () =>{
20+
if(window.innerWidth > 1080){
21+
setScreenAbove1080(true)
22+
setIsMenuToggles(false)
23+
}else{
24+
setScreenAbove1080(false)
25+
}
26+
}
27+
28+
window.addEventListener("resize" , handleSizeOfScreen)
29+
30+
return () => window.removeEventListener("resize" , handleSizeOfScreen)
31+
32+
},[])
33+
34+
const isMobileScreen =
35+
!screenAbove1080 && isMenuToggles
36+
? "opacity-1 translate-x-6 "
37+
: "opacity-0 -translate-x-6 ";
38+
39+
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+
/>
75+
</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 "
83+
/>
84+
</div>
85+
</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>
93+
</div>
94+
</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+
/>
129+
</div>
130+
</div>
131+
</nav>
132+
</closeNavbar.Provider>
133+
);
134+
}
135+
136+
export default Navbar;

‎src/Components/shared/ActionButton.tsx

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { CurrentPage } from '@/Utils/CurrentPage'
2+
import AnchorLink from 'react-anchor-link-smooth-scroll'
3+
4+
type Props = {
5+
setCurrentPage : (value : CurrentPage) => void
6+
target : string,
7+
content : string
8+
}
9+
10+
const ActionButton = ({setCurrentPage ,target , content }: Props) => {
11+
return (
12+
<AnchorLink
13+
className='py-2 px-10 bg-secondary-500 hover:bg-primary-500 rounded-md duration-150 hover:text-white'
14+
href={`#${target}`}
15+
onClick={()=>setCurrentPage(target as CurrentPage)}
16+
>
17+
{content}
18+
</AnchorLink>
19+
)
20+
}
21+
22+
export default ActionButton

‎src/Components/shared/Link.tsx

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { CurrentPage } from "@/Utils/CurrentPage";
2+
import AnchorLink from "react-anchor-link-smooth-scroll";
3+
import { useContext } from "react";
4+
import closeNavbar from "@/Context/CloseNavbar";
5+
6+
type Props = {
7+
page: string;
8+
currentPage: CurrentPage;
9+
setCurrentPage: (value: CurrentPage) => void;
10+
};
11+
12+
const Link = ({ page, currentPage, setCurrentPage }: Props) => {
13+
const closeNavbarContext = useContext(closeNavbar);
14+
15+
console.log(closeNavbarContext);
16+
let hrefId = page.toLocaleLowerCase().replace(/ /g, "") as CurrentPage;
17+
18+
19+
return (
20+
<AnchorLink
21+
className={`${currentPage == hrefId ? "text-primary-500" : ""} transition duration-200 hover:text-primary-300`}
22+
href={`#${hrefId}`}
23+
onClick={() => setCurrentPage(hrefId)}
24+
>
25+
{page}
26+
</AnchorLink>
27+
);
28+
};
29+
30+
export default Link;

‎src/Context/CloseNavbar.tsx

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { createContext } from "react";
2+
3+
interface MyContextType {
4+
// Properties of your context data
5+
isMenuToggles : boolean;
6+
setIsMenuToggles: (newValue: boolean) => void;
7+
}
8+
9+
10+
const CloseNavbar = createContext<MyContextType | undefined > (undefined)
11+
12+
export default CloseNavbar

‎src/Utils/CurrentPage.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export enum CurrentPage {
2+
Home = "home",
3+
Benefits = "benefits",
4+
OurClasses = "ourclasses",
5+
ContactUs = "contactus",
6+
}

‎src/assets/AbstractWaves.png

2.19 KB
Loading

‎src/assets/Arrow.png

4.84 KB
Loading

‎src/assets/BenefitsPageGraphic.png

219 KB
Loading

‎src/assets/Circles.png

26.2 KB
Loading

‎src/assets/ContactUsPageGraphic.png

179 KB
Loading

‎src/assets/EvolveText.png

6.67 KB
Loading

‎src/assets/HomePageGraphic.png

265 KB
Loading

‎src/assets/HomePageText.png

11.3 KB
Loading

‎src/assets/Logo.png

1.6 KB
Loading

‎src/assets/Sparkles.png

4.67 KB
Loading

‎src/assets/SponsorForbes.png

3.41 KB
Loading

‎src/assets/SponsorFortune.png

2.01 KB
Loading

‎src/assets/SponsorRedBull.png

5.17 KB
Loading

‎src/assets/image1.png

973 KB
Loading

‎src/assets/image2.png

1.11 MB
Loading

‎src/assets/image3.png

1.13 MB
Loading

‎src/assets/image4.png

1.19 MB
Loading

‎src/assets/image5.png

1.1 MB
Loading

‎src/assets/image6.png

1.17 MB
Loading

‎src/assets/react.svg

-1
This file was deleted.

0 commit comments

Comments
 (0)