some header changes
This commit is contained in:
parent
9a89064108
commit
13846cc636
@ -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}) => (
|
||||
<Link
|
||||
{...props}
|
||||
getProps={({ isCurrent }) => {
|
||||
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(
|
||||
<header>
|
||||
<Navbar bg="dark" expand="lg" fixed="top">
|
||||
<div className="container">
|
||||
@ -27,14 +39,14 @@ const Header = ( ) => (
|
||||
<Navbar.Collapse id="basic-navbar-nav">
|
||||
<Nav className="mr-auto">
|
||||
<Navbar.Brand><Link to="/"><img src={logo} height="50px" alt="npm logo" id="logo"/></Link></Navbar.Brand>
|
||||
<Nav.Link><NavLink to="/about">Группа</NavLink></Nav.Link>
|
||||
<Nav.Link><NavLink to="/projects/physics">Проекты</NavLink></Nav.Link>
|
||||
<Nav.Link><NavLink to="/partners">Партнеры</NavLink></Nav.Link>
|
||||
<Nav.Link><NavLink to="about">Группа</NavLink></Nav.Link>
|
||||
<Nav.Link><NavLink id={active} to="projects/physics">Проекты</NavLink></Nav.Link>
|
||||
<Nav.Link><NavLink to="partners">Партнеры</NavLink></Nav.Link>
|
||||
</Nav>
|
||||
</Navbar.Collapse>
|
||||
</div>
|
||||
</Navbar>
|
||||
</header>
|
||||
)
|
||||
)}
|
||||
|
||||
export default Header
|
||||
|
Loading…
Reference in New Issue
Block a user