diff --git a/src/components/header.js b/src/components/header.js index 3d885d2..5a6526e 100644 --- a/src/components/header.js +++ b/src/components/header.js @@ -3,23 +3,35 @@ import React from "react" import logo from "../images/index/logo_white.png" import "bootstrap/dist/css/bootstrap.css" import "../styles/header.css" +import { globalHistory as history } from '@reach/router' import {Navbar, Nav} from "react-bootstrap" import { Link } from '@reach/router' -const NavLink = props => ( +const NavLink = ({ partial=true, ...props}) => ( { + getProps={({isCurrent, isPartiallyCurrent }) => { + const isActive = partial + ? isPartiallyCurrent + : isCurrent; return { style: { - color: isCurrent ? "white" : "rgb(230, 221, 221)" + color: isActive ? "white" : "" } }; }} /> ); -const Header = ( ) => ( +const Header = ( ) => { + const { location } = history; + var active; + if (location.pathname === "/projects/physics" || + location.pathname === "/projects/education" || + location.pathname === "/projects/math" || + location.pathname === "/projects/software") + { active = "active" } + return(
@@ -27,14 +39,14 @@ const Header = ( ) => (
-) +)} export default Header