37 lines
1.2 KiB
JavaScript
37 lines
1.2 KiB
JavaScript
|
import { h } from 'preact'
|
||
|
|
import { Link as ReactLink } from 'react-router-dom'
|
||
|
|
import { RightBox, StyledRow as Row } from './styles'
|
||
|
|
import { ImageLogo } from '../Logo'
|
||
|
|
import Link from '../Link'
|
||
|
|
|
||
|
|
import navigation from '../../data/navigation'
|
||
|
|
import { colours, textSizes } from '../../assets/theme'
|
||
|
|
|
||
|
|
const Navigation = ({ theme = {}, lang = 'en' }) => (
|
||
|
|
<RightBox as="nav">
|
||
|
|
{navigation[lang].map(navItem => <Link navLink to={navItem.to} href={navItem.href} textProps={{
|
||
|
|
size: textSizes.xl, colour: theme.foreground || colours.rose
|
||
|
|
}}>{navItem.label}</Link>)}
|
||
|
|
</RightBox>
|
||
|
|
)
|
||
|
|
|
||
|
|
|
||
|
|
const BigHeader = ({ theme = {}, lang = 'en', ...rest }) => (
|
||
|
|
<Row theme={theme} align="center" justify="space-between" {...rest}>
|
||
|
|
<ReactLink to="/">
|
||
|
|
<ImageLogo />
|
||
|
|
</ReactLink>
|
||
|
|
<Navigation theme={theme} lang={lang} {...rest} />
|
||
|
|
</Row>
|
||
|
|
)
|
||
|
|
|
||
|
|
const MiniHeader = ({ theme = {}, lang = 'en', ...rest }) => (
|
||
|
|
<Row theme={theme} align="center" justify="space-between" miniHeader {...rest}>
|
||
|
|
<Navigation theme={theme} lang={lang} {...rest} />
|
||
|
|
</Row>
|
||
|
|
)
|
||
|
|
|
||
|
|
const Header = ({ miniHeader, ...rest }) => miniHeader ? <MiniHeader {...rest} /> : <BigHeader {...rest} />
|
||
|
|
|
||
|
|
export default Header
|