// Header + Footer chrome shared across views

function Header({ route, navigate }) {
  return (
    <header className="site-header">
      <a
        href="#/"
        className="wordmark"
        onClick={(e) => {e.preventDefault();navigate("/");}}>
        freksen</a>
      <nav className="site-nav">
        <a
          href="#/"
          className={"nav-link" + ((route === "/" || route === "" || route.startsWith("/work")) ? " is-active" : "")}
          onClick={(e) => {e.preventDefault();navigate("/");}}>work
        </a>
        <a
          href="#/about"
          className={"nav-link" + (route.startsWith("/about") ? " is-active" : "")}
          onClick={(e) => {e.preventDefault();navigate("/about");}}>about
        </a>
      </nav>
    </header>);

}

function Footer() {
  return (
    <footer className="site-footer">
      <div className="footer-row footer-row-end">
        <a href="https://www.linkedin.com/in/markus-freksen-899bbb105/" target="_blank" rel="noopener noreferrer" className="foot-link">LinkedIn</a>
        <a href="mailto:markus@freksen.com" className="foot-link">markus@freksen.com</a>
      </div>
    </footer>);
}

window.Header = Header;
window.Footer = Footer;