Skip to content

Commit 99c57f8

Browse files
shree404shree404
committed
Nav bar changed
1 parent d91baf2 commit 99c57f8

File tree

14 files changed

+463
-102
lines changed

14 files changed

+463
-102
lines changed

‎package-lock.json‎

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

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,12 @@
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13+
"bootstrap": "^5.3.3",
1314
"react": "^18.3.1",
15+
"react-bootstrap": "^2.10.4",
1416
"react-dom": "^18.3.1",
1517
"react-helmet-async": "^2.0.5",
16-
"react-router-dom": "^6.26.1",
18+
"react-router-dom": "^6.26.2",
1719
"react-scroll": "^1.9.0"
1820
},
1921
"devDependencies": {

‎src/App.jsx‎

Lines changed: 25 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,29 @@
1-
import React from 'react'
2-
import ReactDOM from 'react-dom';
3-
import { BrowserRouter } from 'react-router-dom';
4-
import Navbar from './assets/Components/Navbar/Navbar'
5-
import Hero from './assets/Components/Hero/Hero'
6-
import Programs from './assets/Components/Programs/Programs'
7-
import Title from './assets/Components/Title/Title'
8-
import About from './assets/Components/About/About'
9-
import Upcoming from './assets/Components/Upcoming/Upcoming'
10-
import Glimpses from './assets/Components/Glimpses/Glimpses'
11-
import Testimonial from './assets/Components/Testimonials/Testimonial'
12-
import Testimonials_2 from './assets/Components/Testimonials/Testimonials_2'
13-
import Contact from './assets/Components/Contact/Contact'
14-
import Collabs from './assets/Components/Collabs/Collabs';
15-
const App = () => {
16-
return (
17-
<BrowserRouter>
18-
<div>
19-
<Navbar></Navbar>
20-
<Hero></Hero>
21-
<div className='container'>
22-
<Title title='ABOUT NEPTECH TRIBE' subtitle='What We Are'></Title>
23-
<About></About>
24-
<Title title='OUR PROGRAMS' subtitle='What We Offer'></Title>
25-
<Programs></Programs>
26-
<Title title='ANNOUNCEMENTS' subtitle='Our Upcoming Event'></Title>
27-
<Upcoming></Upcoming>
28-
<Title title='Glimpses' subtitle='sneekpeek from past events'></Title>
29-
<Glimpses> </Glimpses>
30-
{/* <Title title='TESTIMONIALS' subtitle='What student says'></Title> */}
31-
{/* <Testimonial></Testimonial> */}
32-
<Title title='COMMUNITIES AND ORGANIZATIONS' subtitle='Partnership and Collaboration With'></Title>
33-
<Collabs></Collabs>
34-
<Title title='TESTIMONIALS' subtitle='From Board and Advisors'></Title>
35-
<Testimonials_2></Testimonials_2>
36-
<Title title='LEAVE A FEEDBACK' subtitle='Suggestions and Plans'></Title>
37-
<Contact></Contact>
38-
</div>
39-
</div>
40-
</BrowserRouter>
1+
2+
import {
3+
Route,
4+
RouterProvider,
5+
createBrowserRouter,
6+
createRoutesFromElements,
7+
} from "react-router-dom";
8+
9+
import LandingPage from "./Pages/Landingpage";
10+
11+
12+
const router = createBrowserRouter(
13+
createRoutesFromElements(
14+
<Route>
15+
<Route path="/" element={<LandingPage />} />,
16+
<Route path="/home" element={<LandingPage />} />,
17+
</Route>
4118
)
19+
);
20+
21+
function App() {
22+
return (
23+
<>
24+
<RouterProvider router={router} />
25+
</>
26+
);
4227
}
4328

4429
export default App

‎src/Components/landingpage/Navbar.jsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React, { useState, useEffect } from 'react';
2+
import fullogo from '../../assets/LandingPage/logo.png';
3+
import { Link } from 'react-router-dom';
4+
const Navbar = () => {
5+
const [sticky, setSticky] = useState(false);
6+
7+
useEffect(() => {
8+
const handleScroll = () => {
9+
window.scrollY > 50 ? setSticky(true) : setSticky(false);
10+
};
11+
12+
window.addEventListener('scroll', handleScroll);
13+
14+
// Cleanup the event listener on component unmount
15+
return () => {
16+
window.removeEventListener('scroll', handleScroll);
17+
};
18+
}, []);
19+
20+
return (
21+
<nav className={`Navbar ${sticky ? 'Navbar-dark' : ''}`}>
22+
<img src={fullogo} alt="NepTech Tribe Logo" className="Navbar-logo" />
23+
<ul className="Navbar-menu">
24+
<li><Link to="/" >Home</Link></li>
25+
<li><Link to="/" >Gallery</Link></li>
26+
<li><Link to="/">About Us</Link> </li>
27+
<li><Link to="/">Upcoming Events</Link></li>
28+
<li><Link to="/" >Contact us</Link></li>
29+
</ul>
30+
</nav>
31+
);
32+
};
33+
34+
export default Navbar;

‎src/Pages/Landingpage.jsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1+
import Navbar from "../Components/landingpage/Navbar";
2+
13
function LandingPage(){
24
return(
35
<>
6+
<Navbar/>
47
</>
58
)
69
}

‎src/Styles/AboutPage/_Index.scss‎

Whitespace-only changes.

‎src/Styles/App.css‎

Lines changed: 95 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,95 @@
1-
/*# sourceMappingURL=App.css.map */
1+
@import 'bootstrap/dist/css/bootstrap.min.css';
2+
.Navbar {
3+
width: 100%;
4+
background: #fff;
5+
padding: 4px 0;
6+
position: fixed;
7+
top: 0;
8+
left: 0;
9+
display: flex;
10+
align-items: center;
11+
justify-content: space-between;
12+
z-index: 100;
13+
}
14+
.Navbar-dark {
15+
background: #212ea0;
16+
transition: 0.5s;
17+
color: #fff;
18+
}
19+
.Navbar-logo {
20+
width: 11rem;
21+
}
22+
.Navbar-menu li {
23+
display: inline-block;
24+
list-style: none;
25+
margin: 5px 20px;
26+
font-size: 1rem;
27+
}
28+
29+
nav {
30+
width: 100%;
31+
/* color: #fff; */
32+
/* background-color: #212EA0; */
33+
/* background-color: #212EA0; */
34+
background: #fff;
35+
padding: 4px 0;
36+
position: fixed;
37+
top: 0;
38+
left: 0;
39+
display: flex;
40+
align-items: center;
41+
justify-content: space-between;
42+
z-index: 10;
43+
}
44+
45+
.logo {
46+
width: 180px;
47+
}
48+
49+
nav ul li {
50+
display: inline-block;
51+
list-style: none;
52+
margin: 5px 20px;
53+
font-size: 16px;
54+
}
55+
56+
.menu-icon {
57+
display: none;
58+
}
59+
60+
@media (max-width: 1000px) {
61+
.logo {
62+
width: 140px;
63+
}
64+
nav ul li {
65+
margin: 10px 15px;
66+
}
67+
}
68+
@media (max-width: 840px) {
69+
nav {
70+
padding: 15px 0;
71+
}
72+
nav ul {
73+
position: fixed;
74+
top: 0;
75+
right: 0;
76+
bottom: 0;
77+
background: #212ea0;
78+
z-index: -1;
79+
width: 200px;
80+
padding-top: 70px;
81+
transition: 0.5s;
82+
}
83+
nav ul li {
84+
display: block;
85+
margin: 25px 40px;
86+
}
87+
.menu-icon {
88+
display: block;
89+
width: 30px;
90+
cursor: pointer;
91+
}
92+
.hide-mobile-menu {
93+
right: -200px;
94+
}
95+
}/*# sourceMappingURL=App.css.map */

‎src/Styles/App.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/Styles/App.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@import 'bootstrap/dist/css/bootstrap.min.css';
2+
3+
@import 'LandingPage/Index';
4+
@import 'AboutPage/Index';
5+
@import 'ContactPage/Index'

‎src/Styles/ContactPage/_Index.scss‎

Whitespace-only changes.

0 commit comments

Comments
 (0)