@agderposten/header

Header

Installation

npm install @agderposten/header

Usage

import React, {Fragment} from 'react';
import Header, {stylesheet} from '@agderposten/header';

export default () => (
    <Fragment>
        <Header {...{organization}} />
        <style dangerouslySetInnerHTML={{__html: stylesheet}} />
    </Fragment>
);

Properties

The header component can be customized by passing these properties to it:

className (String)

Given to the topmost header element. You'd probably want to apply fixed positioning here.

.header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
}

<Header {...{organization}} className={classNames.header} />

wrapperClassName (String)

Given to the wrapper inside the topmost header element. You'd probably want to override its max-width to fit your page layout.

.wrapper {
    max-width: 800px;
}

<Header {...{organization}} wrapperClassName={classNames.wrapper} />

logoClassName (String)

Given to either the logo image or logo anchor link depending on whether or not you provide a logoLinkHref. You'd probably want to set margin-left to align the logo to the left if you have other children inside the header.

.logo {
    margin-left: 0;
}

<Header {...{organization}} logoClassName={classNames.logo} />

logoLinkHref (String)

A destination URL for when clicking the logo.

<Header {...{organization}} logoLinkHref="http://google.no" />
<Header {...{organization}} logoLinkHref={organization.urls.home} />

children

The header component takes children.

<Header {...{organization}}>
    <p>Hello there</p>
</Header>