mirror of
https://github.com/PotentiaRobotics/website.git
synced 2025-04-17 19:00: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.
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
// }
|
||||
// }
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user