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