mirror of
https://github.com/PotentiaRobotics/website.git
synced 2025-04-20 20:30:18 -04:00
Fixed Navbar
This commit is contained in:
Ram Vempati
parent
ff7b773525
commit
c9e9215892
|
|
@ -21,7 +21,17 @@
|
||||||
work correctly both with client-side routing and a non-root public URL.
|
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`.
|
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>
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@ import PostDetail from "./components/PostDetail";
|
||||||
import Olympian from "./components/Olympian";
|
import Olympian from "./components/Olympian";
|
||||||
import Blog from "./components/Blog";
|
import Blog from "./components/Blog";
|
||||||
import Donate from "./components/Donate";
|
import Donate from "./components/Donate";
|
||||||
import Navbar from "./components/Navbar";
|
import Navbar from "./components/NavBar";
|
||||||
import Sponsors from "./components/Sponsors";
|
import Sponsors from "./components/Sponsors";
|
||||||
import Events from "./components/Events";
|
import Events from "./components/Events";
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,93 +1,88 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { NavLink } from "react-router-dom";
|
|
||||||
import "./assets/Navbar.scss";
|
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"
|
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
|
export default function NavBar(props) {
|
||||||
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`;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// 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 (
|
return (
|
||||||
<nav>
|
<Navbar collapseOnSelect expand="xl" variant="dark" id = "navbarmain" onToggle = {expandHamborgor}>
|
||||||
<div className="brand">
|
<Navbar.Brand href="#home" id = "brandLogo">
|
||||||
<NavLink to="/" exact>
|
<img
|
||||||
<img src={logo} className="nav-logo"></img>
|
src= {logo}
|
||||||
</NavLink>
|
width="20px"
|
||||||
</div>
|
height="62px"
|
||||||
<ul className="nav-links">
|
className="d-inline-block align-top nav-logo"
|
||||||
<li>
|
alt="Potentia Logo"
|
||||||
{" "}
|
/>
|
||||||
<NavLink to="/" exact activeClassName="active-link">
|
</Navbar.Brand>
|
||||||
Home
|
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
|
||||||
</NavLink>
|
<Navbar.Collapse id="responsive-navbar-nav" >
|
||||||
</li>
|
<Nav className="mr-auto">
|
||||||
{/* <li>
|
<Nav.Link href="/">Home</Nav.Link>
|
||||||
{" "}
|
<Nav.Link href = "/meet-olympian">Meet Olympian</Nav.Link>
|
||||||
<NavLink to="/about" activeClassName="active-link">
|
<Nav.Link href="/blog">Blog</Nav.Link>
|
||||||
About
|
<Nav.Link href="/sponsors">Sponsors</Nav.Link>
|
||||||
</NavLink>
|
<Nav.Link href="/contact">Contact Us</Nav.Link>
|
||||||
</li> */}
|
<Nav.Link href="/events">Events</Nav.Link>
|
||||||
<li>
|
|
||||||
{" "}
|
|
||||||
<NavLink to="/meet-olympian" activeClassName="active-link">
|
</Nav>
|
||||||
Meet Olympian
|
|
||||||
</NavLink>
|
</Navbar.Collapse>
|
||||||
</li>
|
</Navbar>
|
||||||
<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>
|
|
||||||
);
|
);
|
||||||
|
|
||||||
|
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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,189 +1,218 @@
|
||||||
|
|
||||||
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
|
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
|
||||||
|
|
||||||
$white: rgb(247, 247, 247);
|
.navbar-brand {
|
||||||
$gray: rgb(172, 172, 172);
|
|
||||||
$black: #000;
|
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-small: 575px;
|
||||||
$mobile: 768px;
|
$mobile: 768px;
|
||||||
$tablet: 1024px;
|
$tablet: 1024px;
|
||||||
$desktop-small: 1200px;
|
$desktop-small: 1200px;
|
||||||
|
|
||||||
@mixin mobile-small {
|
// @mixin mobile-small {
|
||||||
@media (max-width: $mobile-small) {
|
// @media (max-width: $mobile-small) {
|
||||||
@content;
|
// @content;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
@mixin mobile {
|
// @mixin mobile {
|
||||||
@media (min-width: $mobile-small) and (max-width: $mobile) {
|
// @media (min-width: $mobile-small) and (max-width: $mobile) {
|
||||||
@content;
|
// @content;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
@mixin tablet {
|
// @mixin tablet {
|
||||||
@media (min-width: $mobile) and (max-width: $tablet) {
|
// @media (min-width: $mobile) and (max-width: $tablet) {
|
||||||
@content;
|
// @content;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
@mixin desktop-small {
|
// @mixin desktop-small {
|
||||||
@media (min-width: $tablet) and (max-width: $desktop-small) {
|
// @media (min-width: $tablet) and (max-width: $desktop-small) {
|
||||||
@content;
|
// @content;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
@mixin desktop {
|
// @mixin desktop {
|
||||||
@media (min-width: $desktop-small) {
|
// @media (min-width: $desktop-small) {
|
||||||
@content;
|
// @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)
|
|
||||||
|
|
||||||
@media (max-width: $desktop-small) {
|
// nav {
|
||||||
justify-content: space-between;
|
// 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;
|
||||||
|
// }
|
||||||
|
|
||||||
.nav-logo {
|
// }
|
||||||
margin-top: 5px;
|
|
||||||
float: left;
|
|
||||||
width: 150px;
|
|
||||||
height: 62px;
|
|
||||||
|
|
||||||
@media (max-width: $desktop-small) {
|
// .nav-logo {
|
||||||
margin-left: 4vw;
|
// margin-top: 5px;
|
||||||
}
|
// float: left;
|
||||||
|
// width: 150px;
|
||||||
|
// height: 62px;
|
||||||
|
|
||||||
}
|
// @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 {
|
.active-link {
|
||||||
color: $white !important;
|
color:white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.burger {
|
// .burger {
|
||||||
display: none;
|
// display: none;
|
||||||
|
|
||||||
@media (max-width: $desktop-small) {
|
// @media (max-width: $desktop-small) {
|
||||||
margin-right: 4vw;
|
// margin-right: 4vw;
|
||||||
}
|
// }
|
||||||
|
|
||||||
div {
|
// div {
|
||||||
width: 25px;
|
// width: 25px;
|
||||||
height: 3px;
|
// height: 3px;
|
||||||
background-color: $white;
|
// background-color: $white;
|
||||||
margin: 5px;
|
// margin: 5px;
|
||||||
transition: all 0.3s ease;
|
// transition: all 0.3s ease;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
body {
|
// body {
|
||||||
overflow-x: hidden;
|
// overflow-x: hidden;
|
||||||
}
|
// }
|
||||||
|
|
||||||
@media (max-width: $desktop-small) {
|
// @media (max-width: $desktop-small) {
|
||||||
|
|
||||||
body {
|
// body {
|
||||||
overflow-x: hidden;
|
// 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) {
|
// li {
|
||||||
.nav-links {
|
// opacity: 0;
|
||||||
width: 50%;
|
// }
|
||||||
}
|
// }
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: $mobile-small) {
|
// @media (max-width: $mobile) {
|
||||||
.nav-links {
|
// .nav-links {
|
||||||
width: 60%;
|
// width: 50%;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
.burger {
|
// @media (max-width: $mobile-small) {
|
||||||
display: block;
|
// .nav-links {
|
||||||
}
|
// width: 60%;
|
||||||
}
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .burger {
|
||||||
|
// display: block;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
.nav-active {
|
.nav-active {
|
||||||
transform: translateX(0%);
|
transform: translateX(0%);
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes navLinkFade {
|
// @keyframes navLinkFade {
|
||||||
from {
|
// from {
|
||||||
opacity: 0;
|
// opacity: 0;
|
||||||
transform: translateX(50px);
|
// transform: translateX(50px);
|
||||||
}
|
// }
|
||||||
|
|
||||||
to {
|
// to {
|
||||||
opacity: 1;
|
// opacity: 1;
|
||||||
transform: translateX(0px);
|
// transform: translateX(0px);
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
.toggle {
|
// .toggle {
|
||||||
.line1 {
|
// .line1 {
|
||||||
transform: rotate(-45deg) translate(-5px, 6px);
|
// transform: rotate(-45deg) translate(-5px, 6px);
|
||||||
}
|
// }
|
||||||
.line2 {
|
// .line2 {
|
||||||
opacity: 0;
|
// opacity: 0;
|
||||||
}
|
// }
|
||||||
.line3 {
|
// .line3 {
|
||||||
transform: rotate(45deg) translate(-5px, -6px);
|
// transform: rotate(45deg) translate(-5px, -6px);
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user