navbar added

Coders-Evoke-Community · May 25, 2022 · c007155 · c007155
1 parent f7f17fa
commit c007155
Show file tree

Hide file tree

Showing 14 changed files with 498 additions and 16,034 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,8 +6,14 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.1.1",
     "@testing-library/user-event": "^13.5.0",
+    "bootstrap": "^5.2.0-beta1",
+    "jquery": "^3.6.0",
+    "popper.js": "^1.16.1",
     "react": "^18.0.0",
+    "react-bootstrap": "^2.4.0",
     "react-dom": "^18.0.0",
+    "react-router": "^6.3.0",
+    "react-router-dom": "^5.3.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

diff --git a/public/CE_Logo.png b/public/CE_Logo.png
diff --git a/public/index.html b/public/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -15,6 +16,7 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"/>
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

diff --git a/src/App.js b/src/App.js
@@ -1,12 +1,32 @@
 import './App.css';
-// import Navbar from './components/navbar/navbar'
-import Hero from './components/hero/hero'
+import 'bootstrap/dist/css/bootstrap.min.css';
+import { BrowserRouter,Route, Switch} from 'react-router-dom';
+import Navigation from './components/navbar/navbar';
+import Hero from './components/hero/hero';
+import Home from './components/hero/hero';
+import About from './components/About/about';
+import Teams from './components/Teams/teams';
+import Contact from './components/Contact Us/contact_us';
+import Events from './components/Events/events';
+import Join from './components/Join Us/join_us';
 
 function App() {
   return (
     <>
-    {/* <Navbar/> */}
-    <Hero/>
+      <BrowserRouter>
+        <div>
+          <Navigation />
+        </div>
+        <Switch>
+          <Route path="/" element={<Home />} />
+          <Route path="/About" element={<About/>} />
+          <Route path="/Teams" element={<Teams/>} />
+          <Route path="/Events" element={<Events/>} />
+          <Route path='/Join Us' element={<Join/>} />
+          <Route path="/contactus" element={<Contact />} />
+        </Switch>
+        </BrowserRouter>
+      <Hero/>
     </>
   );
 }

diff --git a/src/components/About/about.js b/src/components/About/about.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const About = () =>{
+    return(
+        <div>
+            About page
+        </div>
+    )
+}
+
+export default About
+
diff --git a/src/components/Contact Us/contact_us.js b/src/components/Contact Us/contact_us.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Contact = () =>{
+    return(
+        <div>
+            Contact Us page
+        </div>
+    )
+}
+
+export default Contact
+
diff --git a/src/components/Events/events.js b/src/components/Events/events.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Events = () =>{
+    return(
+        <div>
+            Events page
+        </div>
+    )
+}
+
+export default Events
+
diff --git a/src/components/Join Us/join_us.js b/src/components/Join Us/join_us.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Join = () =>{
+    return(
+        <div>
+            Join Us page
+        </div>
+    )
+}
+
+export default Join
+
diff --git a/src/components/Teams/teams.js b/src/components/Teams/teams.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Teams = () =>{
+    return(
+        <div>
+            Teams page
+        </div>
+    )
+}
+
+export default Teams
+
diff --git a/src/components/navbar/navbar.css b/src/components/navbar/navbar.css
@@ -0,0 +1,43 @@
+.container{
+    font-family: 'Poppins';
+    font-size: 23px;
+    border-radius: 20px;
+    box-shadow:  0 5px 20px 0 rgba(29, 21, 21, 0.19);
+    margin-top: 50px;
+    width: 60%;
+    height: 80px;
+    margin-left: 2%;
+    justify-content: space-between;
+}
+
+.nav-link{
+    margin-left: 20px;
+    color: black;
+}
+
+.navbar-brand{
+    padding-left: 10px;
+}
+
+.active {
+    background: /* gradient can be an image */
+    linear-gradient(
+      to right, 
+      rgb(243, 8, 28) 0%,
+      rgb(238, 5, 79) 50%,
+      rgb(118, 6, 116) 100%
+    )
+    left 
+    bottom  
+    no-repeat; 
+    background-size:100% 8px ;
+    border-radius: 8px;
+}
+
+
+@media only screen and (max-width:960px){
+    .nav-link{
+        background-color : white;
+        text-align: center;
+    }
+}
diff --git a/src/components/navbar/navbar.js b/src/components/navbar/navbar.js
@@ -1,9 +1,31 @@
-import React, { Component } from 'react'
+import React, { Component } from "react";
+import 'bootstrap/dist/css/bootstrap.min.css';
+import './navbar.css';
+import {Nav, Navbar} from 'react-bootstrap';
 
-export default class navbar extends Component {
-  render() {
-    return (
-      <div>navbar</div>
-    )
-  }
+
+class Navigation extends Component{
+    render(){
+        return (
+            <div className="container">
+            <Navbar collapseOnSelect expand="lg" sticky="top" variant="tabs" defaultActiveKey="/home">
+                <link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'></link>
+                <Navbar.Brand href="#home" className="fa fa-globe"><img width="60" height="60" className="d-inline-block align-top" href="#home" src={process.env.PUBLIC_URL+"CE_Logo.png"} alt="logo"/></Navbar.Brand>
+                <Navbar.Toggle aria-controls="responsive-navbar-nav" />
+                <Navbar.Collapse id="responsive-navbar-nav">
+                    <Nav>
+                        <Nav.Link href="/">Home</Nav.Link>
+                        <Nav.Link href="/About">About</Nav.Link>
+                        <Nav.Link href="/teams">Team</Nav.Link>
+                        <Nav.Link href="/Events">Events</Nav.Link>
+                        <Nav.Link href="/Join Us">Join Us</Nav.Link>
+                        <Nav.Link href="/Contact Us">Contact Us</Nav.Link>
+                    </Nav>
+                </Navbar.Collapse>
+            </Navbar>
+            </div>
+        );
+    }
 }
+
+export default Navigation
diff --git a/src/index.css b/src/index.css
@@ -13,7 +13,7 @@ code {
 }
 
 .hero {
-  background-color: #f1f1f1;
+  /* background-color: #f1f1f1; */
   display: flex;
   align-items: center;
   justify-content: space-between;

diff --git a/src/index.js b/src/index.js
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+// import 'bootstrap/dist/css/bootstrap.min.css';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(