From c9e921589299d8b1d0689a8a75f3a1c41b463710 Mon Sep 17 00:00:00 2001 From: Ram Vempati Date: Thu, 3 Jun 2021 20:29:43 -0400 Subject: [PATCH] Fixed Navbar --- public/index.html | 10 + src/App.js | 2 +- src/components/Navbar.js | 159 +++++++-------- src/components/assets/Navbar.scss | 321 ++++++++++++++++-------------- 4 files changed, 263 insertions(+), 229 deletions(-) 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`. --> + Potentia Robotics + + + 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 ( - + + + + + + + + + + ); + + 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); +// } +// }