All files / src/px-partials/px-header index.js

25% Statements 1/4
0% Branches 0/8
0% Functions 0/3
33.33% Lines 1/3
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46        1x                                                                                  
import Brand from '../px-brand';
import styles from './index.scss';
 
// TODO: Use next/link
const Link = ({label, href, children}) => (<a className='c-header__link' title={label} href={href}>
	{children}
</a>);
 
export default({
	title = 'Header',
	subtitle,
	powered,
	nav = [
		{
			label: 'Home',
			href: '/'
		}
	]
}) => (
	<header className='px-header'>
		<div className='c-header'>
			<div className='c-header__left'>
				<div className='c-header__brand'>
					<span className='c-header__logo'>
						<Brand size='32' color='#FFF'/>
					</span>
				</div>
				<span className='c-header__title epsilon'>
					{title}
				</span>
        { subtitle && <div className='is-hidden@sm-'>
					<span className='c-header__seperator'></span>
          <span className='c-header__subtitle'>{subtitle}</span>
				</div> }
			</div>
			<div className='c-header__right'>
				<nav className='c-header__nav'>
					{nav && nav.map((item, index) => (<Link {...item}>{item.label}</Link>))}
				</nav>
				{ powered && <div className='c-header__powered is-hidden@xs-'>{powered}</div> }
			</div>
		</div>
		<style jsx>{styles}</style>
	</header>
);