59 lines
1.7 KiB
JavaScript
59 lines
1.7 KiB
JavaScript
import React from 'react'
|
|
import * as navStyles from './nav.module.css'
|
|
import { Link } from 'gatsby'
|
|
import { StaticImage } from "gatsby-plugin-image"
|
|
|
|
let pages = [
|
|
['home', '/', navStyles.desktopOnly],
|
|
['zeiten & location', '/treff/', ''],
|
|
['events', '/events/', ''],
|
|
['über uns', '/about/', ''],
|
|
['kontakt', '/kontakt/', ''],
|
|
['verein', '/verein/', ''],
|
|
['supporte uns', '/support/', ''],
|
|
]
|
|
|
|
export default function Nav({ 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}>
|
|
<Link to="/">
|
|
<div className={navStyles.headerContent}>
|
|
<span className={navStyles.logoContainer}>
|
|
<StaticImage
|
|
className={navStyles.logo}
|
|
src="../images/logo_ctdo.svg"
|
|
alt="CTDO-Logo"
|
|
loading="eager"
|
|
placeholder="none"
|
|
/>
|
|
</span>
|
|
<span>
|
|
<span className={navStyles.chaos}>Chaostreff</span> Dortmund
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
</header>
|
|
<nav className={navStyles.nav}>
|
|
<div className={navStyles.navContent}>
|
|
{pages.map(([title, link, device]) => (
|
|
<Link
|
|
key={title}
|
|
className={navStyles.navItem + activeClasses(link) + ' ' + device}
|
|
activeClassName={navStyles.navItemActive}
|
|
to={`${link}`}
|
|
>
|
|
{title}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</nav>
|
|
</>
|
|
)
|
|
}
|