NPM/site
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

some header changes

Browse Source
This commit is contained in:
Elinorre 2020-02-14 17:18:12 +03:00
parent 9a89064108
commit 13846cc636
1 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/header.js
View File

@ -3,23 +3,35 @@ import React from "react"
import logo from "../images/index/logo_white.png" import logo from "../images/index/logo_white.png"
import "bootstrap/dist/css/bootstrap.css" import "bootstrap/dist/css/bootstrap.css"
import "../styles/header.css" import "../styles/header.css"
import { globalHistory as history } from '@reach/router'
import {Navbar, Nav} from "react-bootstrap" import {Navbar, Nav} from "react-bootstrap"
import { Link } from '@reach/router' import { Link } from '@reach/router'
const NavLink = props => ( const NavLink = ({ partial=true, ...props}) => (
<Link <Link
{...props} {...props}
getProps={({ isCurrent }) => { getProps={({isCurrent, isPartiallyCurrent }) => {
const isActive = partial
? isPartiallyCurrent
: isCurrent;
return { return {
style: { 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> <header>
<Navbar bg="dark" expand="lg" fixed="top"> <Navbar bg="dark" expand="lg" fixed="top">
<div className="container"> <div className="container">
@ -27,14 +39,14 @@ const Header = ( ) => (
<Navbar.Collapse id="basic-navbar-nav"> <Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto"> <Nav className="mr-auto">
<Navbar.Brand><Link to="/"><img src={logo} height="50px" alt="npm logo" id="logo"/></Link></Navbar.Brand> <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="about">Группа</NavLink></Nav.Link>
<Nav.Link><NavLink to="/projects/physics">Проекты</NavLink></Nav.Link> <Nav.Link><NavLink id={active} to="projects/physics">Проекты</NavLink></Nav.Link>
<Nav.Link><NavLink to="/partners">Партнеры</NavLink></Nav.Link> <Nav.Link><NavLink to="partners">Партнеры</NavLink></Nav.Link>
</Nav> </Nav>
</Navbar.Collapse> </Navbar.Collapse>
</div> </div>
</Navbar> </Navbar>
</header> </header>
) )}
export default Header export default Header