70 lines
2.5 KiB
JavaScript
70 lines
2.5 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import { NavLink } from "react-router-dom";
|
|
import { withRouter } from "react-router";
|
|
|
|
function Header(props) {
|
|
|
|
|
|
function getNavLinkClass(path) {
|
|
return props.location.pathname === path
|
|
? "nav-item active"
|
|
: "nav-item";
|
|
}
|
|
return (
|
|
<div>
|
|
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
|
|
<span className="navbar-brand mb-0 h1">Flexitime Tool</span>
|
|
<div className="collapse navbar-collapse">
|
|
<ul className="navbar-nav mr-auto">
|
|
<li className={getNavLinkClass("/")}>
|
|
<NavLink to="/" className="nav-link" exact>
|
|
Home
|
|
</NavLink>
|
|
</li>
|
|
<li className={getNavLinkClass("/users")}>
|
|
<NavLink to="/users" className="nav-link">
|
|
User List
|
|
</NavLink>
|
|
</li>
|
|
<li className={getNavLinkClass("/about")}>
|
|
<NavLink to="/about" className="nav-link" exact>
|
|
About
|
|
</NavLink>
|
|
</li>
|
|
{/*<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
Dropdown
|
|
</a>
|
|
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
|
|
<a class="dropdown-item" href="#">Action</a>
|
|
<a class="dropdown-item" href="#">Another action</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="#">Something else here</a>
|
|
</div>
|
|
</li>*/}
|
|
</ul>
|
|
<div className="my-2">
|
|
<button className="btn btn-outline-light my-2 my-sm-0" type="button">Account</button>
|
|
</div>
|
|
{/*<ul>*/}
|
|
{/* <li className={getNavLinkClass("/about") + " float-right"}>*/}
|
|
{/* <NavLink to="/about" className="nav-link" exact>*/}
|
|
{/* About*/}
|
|
{/* </NavLink>*/}
|
|
{/* </li>*/}
|
|
{/* </ul>*/}
|
|
</div>
|
|
|
|
{/*{" | "}*/}
|
|
{/*<NavLink to="/users" activeStyle={activeStyle}>User List</NavLink>*/}
|
|
{/*{" | "}*/}
|
|
{/*<NavLink to="/groups" activeStyle={activeStyle}>Group List</NavLink>*/}
|
|
{/*{" | "}*/}
|
|
{/*<NavLink to="/about" activeStyle={activeStyle} exact>About</NavLink>*/}
|
|
</nav>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default withRouter(Header);
|