2019-12-11 21:34:32 +00:00
|
|
|
import React from "react"
|
|
|
|
import navStyles from "./nav.module.css"
|
|
|
|
import { Link } from "gatsby"
|
|
|
|
|
|
|
|
let pages = [
|
2020-01-28 21:30:52 +00:00
|
|
|
["home", "/", navStyles.desktopOnly],
|
|
|
|
["zeiten & location", "treff", ""],
|
|
|
|
["events", "events", ""],
|
2020-02-11 19:36:50 +00:00
|
|
|
["über uns", "about", ""],
|
2020-01-28 21:30:52 +00:00
|
|
|
["kontakt", "kontakt", ""],
|
|
|
|
["verein", "verein", ""],
|
|
|
|
["supporte uns", "support", ""],
|
2019-12-11 21:34:32 +00:00
|
|
|
]
|
|
|
|
|
2020-01-23 20:28:26 +00:00
|
|
|
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 (
|
|
|
|
<>
|
2020-01-23 21:06:44 +00:00
|
|
|
<header className={navStyles.header}>
|
2020-01-28 21:30:52 +00:00
|
|
|
<Link to="/">
|
|
|
|
<div className={navStyles.headerContent}>
|
2020-01-28 21:51:14 +00:00
|
|
|
{/* todo: fix image links in prod by using the gatsby component */}
|
|
|
|
<img alt="CTDO-Logo" width="80rem" src="/logo_ctdo.svg" />
|
2020-01-28 21:30:52 +00:00
|
|
|
<span>
|
|
|
|
<span className={navStyles.chaos}>Chaostreff</span> Dortmund
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</Link>
|
2020-01-23 21:06:44 +00:00
|
|
|
</header>
|
|
|
|
<nav className={navStyles.nav}>
|
2020-01-23 20:28:26 +00:00
|
|
|
<div className={navStyles.navContent}>
|
2020-01-28 21:30:52 +00:00
|
|
|
{pages.map(([title, link, device]) => (
|
2020-01-23 20:28:26 +00:00
|
|
|
<Link
|
|
|
|
key={title}
|
2020-01-28 21:30:52 +00:00
|
|
|
className={navStyles.navItem + activeClasses(link) + " " + device}
|
2020-01-23 20:28:26 +00:00
|
|
|
activeClassName={navStyles.navItemActive}
|
|
|
|
activeStyle={{ textDecoration: `solid underline white 0.2em` }}
|
|
|
|
to={`/${link}`}
|
|
|
|
>
|
|
|
|
{title}
|
|
|
|
</Link>
|
|
|
|
))}
|
|
|
|
</div>
|
2020-01-23 21:06:44 +00:00
|
|
|
</nav>
|
2020-01-23 20:28:26 +00:00
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|