# Header

![size](https://img.shields.io/bundlephobia/min/@propellerads/header.svg)
![](https://img.shields.io/npm/v/@propellerads/header.svg?style=flat-square)

[NPM](https://www.npmjs.com/package/@propellerads/header) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/Header)

## Installation
* `yarn add @propellerads/header` or `npm install @propellerads/header -S`

### How to use
* `import Header from '@propellerads/header';`
* And render
```
<Header
    theme={themes[theme]}
    logo={logo}
    sidebarButton={SidebarButton}
>
    <Header.HeaderBalance
        balance={123456789.99}
        dailyEarned={newDailyEarned}
    />

    <Header.HeaderItem
        onClick={() => alert('Single notification has been shown')}
        component={customComponent}
    />

    <Header.HeaderDivider />

    <Header.HeaderItem icon={<Case size={SIZE.MEDIUM_SMALL} color={COLOR.GRAY}/>}>
        <Header.HeaderDropdown>
            {customDropDownContent}
        </Header.HeaderDropdown>
    </Header.HeaderItem>

    <Header.HeaderDivider />

    <Header.HeaderItem
        isRightDropdown
        title="Some text"
        icon={<User size={SIZE.MEDIUM_SMALL} color={COLOR.GRAY}/>}
    >
        <Header.HeaderDropdown>
            <Header.HeaderDropdownList items={userMenu} />
        </Header.HeaderDropdown>
    </Header.HeaderItem>
</Header>
```