header partial paths styling

This commit is contained in:
Elinorre 2020-02-16 20:40:41 +03:00
parent 64bdddc90f
commit 51c55d56c8

View File

@ -16,7 +16,7 @@ const NavLink = ({ partial=true, ...props}) => (
: isCurrent; : isCurrent;
return { return {
style: { style: {
color: isActive ? "white" : "" color: isActive ? "white" : "",
} }
}; };
}} }}
@ -25,12 +25,8 @@ const NavLink = ({ partial=true, ...props}) => (
const Header = ( ) => { const Header = ( ) => {
const { location } = history; const { location } = history;
var active; var activePrj = location.pathname.includes('/projects') ? 'active': '';
if (location.pathname === "/projects/physics" || var activeNews = location.pathname.includes('/news') ? 'active': '';
location.pathname === "/projects/education" ||
location.pathname === "/projects/math" ||
location.pathname === "/projects/software")
{ active = "active" }
return( return(
<header> <header>
<Navbar bg="dark" expand="lg" fixed="top"> <Navbar bg="dark" expand="lg" fixed="top">
@ -39,8 +35,9 @@ 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 id={activeNews} to="news">Новости</NavLink></Nav.Link>
<Nav.Link><NavLink to="about">Группа</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 id={activePrj} 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>