import React from "react"
import navStyles from "./nav.module.css"
import { Link } from "gatsby"

let pages = [
  ["home", ""],
  ["zeiten & location", "treff"],
  ["events", "events"],
  ["kontakt", "kontakt"],
  ["verein", "verein"],
]

export default ({ path }) => {
  // nav items should always be active in the staticly generated html
  const isSSR = typeof window === "undefined"
  const activeClasses = link =>
    isSSR && path === "/" + link ? " " + navStyles.navItemActive : ""

  return (
    <>
      <header className={navStyles.header}>
        <div className={navStyles.headerContent}>
          <span className={navStyles.chaos}>Chaostreff</span> Dortmund
        </div>
      </header>
      <nav className={navStyles.nav}>
        <div className={navStyles.navContent}>
          {pages.map(([title, link]) => (
            <Link
              key={title}
              className={navStyles.navItem + activeClasses(link)}
              activeClassName={navStyles.navItemActive}
              activeStyle={{ textDecoration: `solid underline white 0.2em` }}
              to={`/${link}`}
            >
              {title}
            </Link>
          ))}
        </div>
      </nav>
    </>
  )
}