diff --git a/public/index.html b/public/index.html
index 421fb63..d43e2ec 100644
--- a/public/index.html
+++ b/public/index.html
@@ -21,7 +21,17 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Potentia Robotics</title>
+ <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
+ integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
+ crossorigin="anonymous"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
+ integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
+ crossorigin="anonymous"></script>
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
+ integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
+ crossorigin="anonymous"></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/src/App.js b/src/App.js
index c7c1417..8e5ea69 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,7 +7,7 @@ import PostDetail from "./components/PostDetail";
import Olympian from "./components/Olympian";
import Blog from "./components/Blog";
import Donate from "./components/Donate";
-import Navbar from "./components/Navbar";
+import Navbar from "./components/NavBar";
import Sponsors from "./components/Sponsors";
import Events from "./components/Events";
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 2049200..3f8be08 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -1,93 +1,88 @@
import React from "react";
-import { NavLink } from "react-router-dom";
import "./assets/Navbar.scss";
+import {Nav, Navbar, NavDropdown} from "react-bootstrap"
+import { NavLink } from "react-router-dom";
import logo from "./assets/img/logo_tr_bg.png"
-export default function Navbar(props) {
- const handleBurger = () => {
- const burger = document.querySelector(".burger");
- const nav = document.querySelector(".nav-links");
- const navLinks = document.querySelectorAll(".nav-links li");
- nav.classList.toggle("nav-active");
- // animate links
- navLinks.forEach((link, index) => {
- if (link.style.animation) {
- link.style.animation = "";
- } else {
- link.style.animation = `navLinkFade 0.5s ease forwards ${
- index / 7 + 0.5
- }s`;
- }
- });
+export default function NavBar(props) {
+
- // burger anim
- burger.classList.toggle("toggle");
- };
+ var isMobileNavbarShowing = false;
+ var windowWidth = window.innerWidth;
+ var windowHeight = window.innerHeight;
+
+
+ window.onresize = reportWindowSize;
+
+ window.addEventListener('resize', reportWindowSize);
return (
- <nav>
- <div className="brand">
- <NavLink to="/" exact>
- <img src={logo} className="nav-logo"></img>
- </NavLink>
- </div>
- <ul className="nav-links">
- <li>
- {" "}
- <NavLink to="/" exact activeClassName="active-link">
- Home
- </NavLink>
- </li>
- {/* <li>
- {" "}
- <NavLink to="/about" activeClassName="active-link">
- About
- </NavLink>
- </li> */}
- <li>
- {" "}
- <NavLink to="/meet-olympian" activeClassName="active-link">
- Meet Olympian
- </NavLink>
- </li>
- <li>
- {" "}
- <NavLink to="/blog" activeClassName="active-link">
- Blog
- </NavLink>
- </li>
- <li>
- {" "}
- <NavLink to="/sponsors" activeClassName="active-link">
- Sponsors
- </NavLink>
- </li>
- <li>
- {" "}
- <NavLink to="/contact" activeClassName="active-link">
- Contact Us
- </NavLink>
- </li>
- {/* <li>
- {" "}
- <NavLink to="/donate" activeClassName="active-link">
- Donate
- </NavLink>
- </li> */}
- <li>
- {" "}
- <NavLink to="/events" activeClassName="active-link">
- Events
- </NavLink>
- </li>
- </ul>
- <div className="burger" onClick={handleBurger}>
- <div className="line1"></div>
- <div className="line2"></div>
- <div className="line3"></div>
- </div>
- </nav>
+ <Navbar collapseOnSelect expand="xl" variant="dark" id = "navbarmain" onToggle = {expandHamborgor}>
+ <Navbar.Brand href="#home" id = "brandLogo">
+ <img
+ src= {logo}
+ width="20px"
+ height="62px"
+ className="d-inline-block align-top nav-logo"
+ alt="Potentia Logo"
+ />
+ </Navbar.Brand>
+ <Navbar.Toggle aria-controls="responsive-navbar-nav" />
+ <Navbar.Collapse id="responsive-navbar-nav" >
+ <Nav className="mr-auto">
+ <Nav.Link href="/">Home</Nav.Link>
+ <Nav.Link href = "/meet-olympian">Meet Olympian</Nav.Link>
+ <Nav.Link href="/blog">Blog</Nav.Link>
+ <Nav.Link href="/sponsors">Sponsors</Nav.Link>
+ <Nav.Link href="/contact">Contact Us</Nav.Link>
+ <Nav.Link href="/events">Events</Nav.Link>
+
+
+ </Nav>
+
+ </Navbar.Collapse>
+ </Navbar>
+
+
);
+
+ function expandHamborgor(){
+ var navbarmain = document.getElementById("navbarmain")
+
+
+ if(isMobileNavbarShowing === false){
+ isMobileNavbarShowing = true;
+ navbarmain.style.height = "400px";
+ }else{
+ isMobileNavbarShowing = false;
+ navbarmain.style.height = "100px";
+ }
+
+
+ }
+
+ function reportWindowSize(){
+ var navbarmain = document.getElementById("navbarmain")
+ var navbarcollapse = document.getElementById("responsive-navbar-nav")
+
+
+ windowWidth = window.innerWidth;
+ windowHeight = window.innerHeight;
+
+
+
+ if(windowWidth > 1000){
+
+ navbarmain.style.height = "100px";
+ }else if(windowWidth < 1000 && isMobileNavbarShowing === true){
+ navbarmain.style.height = "400px"
+ }
+ }
+
}
+
+
+
+
diff --git a/src/components/assets/Navbar.scss b/src/components/assets/Navbar.scss
index ea18f48..a6b5166 100644
--- a/src/components/assets/Navbar.scss
+++ b/src/components/assets/Navbar.scss
@@ -1,189 +1,218 @@
+
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
-$white: rgb(247, 247, 247);
-$gray: rgb(172, 172, 172);
-$black: #000;
+.navbar-brand {
+
+ width: 150px;
+ // margin-left: 75px;
+ margin-left: 5%;
+ background-color:black;
+
+
+
+}
+
+#navbarmain{
+ height: 100px;
+ color: black;
+ background: black;
+}
+
+#responsive-navbar-nav{
+
+ float: right;
+ align-items: center;
+ justify-content: right;
+
+ // min-height: 10vh;
+ font-family: "Poppins", sans-serif;
+ // padding-bottom: 0.5em;
+ background: rgb(0, 0, 0);
+ // linear-gradient(135deg, rgb(80, 100, 147), 95%, #000c40)
+ padding-inline-start: 20%;
+ list-style-type: disc;
+ margin-block-start: 1em;
+ margin-block-end: 1em;
+ width: 900px;
+}
+
+.nav-link {
+ // position: absolute;
+ // right: 0;
+ // height: 65%;
+ // padding-bottom: 2%;
+ opacity: 90%;
+ padding-top: 10px;
+ // top: 8vh;
+ // display: flex;
+ // flex-direction: column;
+ align-items: center;
+ background-color: black;
+ margin-right: 50px;
+ // width: 30%;
+
+ // transform: translateX(100%);
+ // transition: transform 0.5s ease-in;
+ // box-sizing: border-box;
+ // padding-inline-start: 40px;
+}
+
+// .nav-link{
+
+// }
+
+
+
+// $white: rgb(247, 247, 247);
+// $gray: rgb(172, 172, 172);
+// $black: #000;
$mobile-small: 575px;
$mobile: 768px;
$tablet: 1024px;
$desktop-small: 1200px;
-@mixin mobile-small {
- @media (max-width: $mobile-small) {
- @content;
- }
-}
+// @mixin mobile-small {
+// @media (max-width: $mobile-small) {
+// @content;
+// }
+// }
-@mixin mobile {
- @media (min-width: $mobile-small) and (max-width: $mobile) {
- @content;
- }
-}
+// @mixin mobile {
+// @media (min-width: $mobile-small) and (max-width: $mobile) {
+// @content;
+// }
+// }
-@mixin tablet {
- @media (min-width: $mobile) and (max-width: $tablet) {
- @content;
- }
-}
+// @mixin tablet {
+// @media (min-width: $mobile) and (max-width: $tablet) {
+// @content;
+// }
+// }
-@mixin desktop-small {
- @media (min-width: $tablet) and (max-width: $desktop-small) {
- @content;
- }
-}
+// @mixin desktop-small {
+// @media (min-width: $tablet) and (max-width: $desktop-small) {
+// @content;
+// }
+// }
-@mixin desktop {
- @media (min-width: $desktop-small) {
- @content;
- }
-}
+// @mixin desktop {
+// @media (min-width: $desktop-small) {
+// @content;
+// }
+// }
-* {
- box-sizing: border-box;
- padding: 0;
- margin: 0;
-}
-nav {
- display: flex;
- justify-content: space-around;
- align-items: center;
- min-height: 10vh;
- font-family: "Poppins", sans-serif;
- padding-bottom: 0.5em;
- background: rgb(0, 0, 0);
- //linear-gradient(135deg, rgb(80, 100, 147), 95%, #000c40)
+
+// nav {
+// display: flex;
+// justify-content: space-around;
+// align-items: center;
+// min-height: 10vh;
+// font-family: "Poppins", sans-serif;
+// padding-bottom: 0.5em;
+// background: rgb(0, 0, 0);
+// //linear-gradient(135deg, rgb(80, 100, 147), 95%, #000c40)
- @media (max-width: $desktop-small) {
- justify-content: space-between;
- }
+// @media (max-width: $desktop-small) {
+// justify-content: space-between;
+// }
-}
+// }
-.nav-logo {
- margin-top: 5px;
- float: left;
- width: 150px;
- height: 62px;
+// .nav-logo {
+// margin-top: 5px;
+// float: left;
+// width: 150px;
+// height: 62px;
- @media (max-width: $desktop-small) {
- margin-left: 4vw;
- }
+// @media (max-width: $desktop-small) {
+// margin-left: 4vw;
+// }
-}
+// }
-.nav-links {
- display: flex;
- justify-content: space-around;
- width: 900px;
- z-index: 9999;
- padding-top: 10px;
- @include tablet {
- width: 40%;
- }
- li {
- list-style: none;
- a {
- color: $gray;
- text-decoration: none;
- }
- }
-}
.active-link {
- color: $white !important;
+ color:white;
}
-.burger {
- display: none;
+// .burger {
+// display: none;
- @media (max-width: $desktop-small) {
- margin-right: 4vw;
- }
+// @media (max-width: $desktop-small) {
+// margin-right: 4vw;
+// }
- div {
- width: 25px;
- height: 3px;
- background-color: $white;
- margin: 5px;
- transition: all 0.3s ease;
- }
-}
+// div {
+// width: 25px;
+// height: 3px;
+// background-color: $white;
+// margin: 5px;
+// transition: all 0.3s ease;
+// }
+// }
-body {
- overflow-x: hidden;
-}
+// body {
+// overflow-x: hidden;
+// }
-@media (max-width: $desktop-small) {
+// @media (max-width: $desktop-small) {
- body {
- overflow-x: hidden;
- }
+// body {
+// overflow-x: hidden;
+// }
- .nav-links {
- position: absolute;
- right: 0;
- height: 65%;
- padding-bottom: 2%;
- opacity: 90%;
- top: 8vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- background-color: $black;
- width: 30%;
- transform: translateX(100%);
- transition: transform 0.5s ease-in;
- li {
- opacity: 0;
- }
- }
- @media (max-width: $mobile) {
- .nav-links {
- width: 50%;
- }
- }
+// li {
+// opacity: 0;
+// }
+// }
- @media (max-width: $mobile-small) {
- .nav-links {
- width: 60%;
- }
- }
+// @media (max-width: $mobile) {
+// .nav-links {
+// width: 50%;
+// }
+// }
- .burger {
- display: block;
- }
-}
+// @media (max-width: $mobile-small) {
+// .nav-links {
+// width: 60%;
+// }
+// }
+
+// .burger {
+// display: block;
+// }
+// }
.nav-active {
transform: translateX(0%);
}
-@keyframes navLinkFade {
- from {
- opacity: 0;
- transform: translateX(50px);
- }
+// @keyframes navLinkFade {
+// from {
+// opacity: 0;
+// transform: translateX(50px);
+// }
- to {
- opacity: 1;
- transform: translateX(0px);
- }
-}
+// to {
+// opacity: 1;
+// transform: translateX(0px);
+// }
+// }
-.toggle {
- .line1 {
- transform: rotate(-45deg) translate(-5px, 6px);
- }
- .line2 {
- opacity: 0;
- }
- .line3 {
- transform: rotate(45deg) translate(-5px, -6px);
- }
-}
+// .toggle {
+// .line1 {
+// transform: rotate(-45deg) translate(-5px, 6px);
+// }
+// .line2 {
+// opacity: 0;
+// }
+// .line3 {
+// transform: rotate(45deg) translate(-5px, -6px);
+// }
+// }