# header-bar
Basic header bar with RWD.

### Installation
```bash
npm install --save-dev header-bar
```
### Usage
#### Javascript
```js
import React from 'react';
import HeaderBar from 'header-bar';

class App extends React.Component {
    return <div className='app'>
        <HeaderBar
          hamburger={{ src:'/img/hamburger.svg', title:'Menu' }}
        >
            <a href='//localhost' data-logo={true}><img src='/img/logo.svg' title='logo'/></a>
            <a href='//nav.link.href' data-nav={true} data-color='rgb(64, 124, 156)' data-match='nav.link.href'>nav-link-1</a>
            <a href='//localhost' data-nav={true} data-color='goldenrod' data-match='local(.*)'>nav-link-2</a>
            <a href='//facebook.com' data-subnav={true} data-color='rgb(62, 86, 155)'><img src='/img/facebook.svg'/></a>
            <a href='//sub.nav.link' data-subnav={true} data-color='rgb(229, 26, 0)'>sub-nav-link</a>
            <div data-submenu_button={true} data-submenu_key='login'>
                <img src='/img/facebook.svg' style={{height: '1.8em', borderRadius: '0.9em'}}/>
                <span title='login'>設定</span>
            </div>
            <div data-submenu_button={true} data-submenu_key='logpeople'><span title='logpeople'>紀錄</span></div>
            <div data-submenu_item={true}  data-submenu_key='login' data-submenu_position='header'>
                <div style={{color: 'rgb(24, 155, 202)'}}>VIP會員</div>
            </div>
            <div data-submenu_item={true}  data-submenu_key='login' data-submenu_position='body'>
                <a href='/user-info' title='User Info'>修改個人資訊</a>
            </div>
            <div data-submenu_item={true}  data-submenu_key='login' data-submenu_position='body'>
                <a href='/change-password' title='User Info'>更改密碼</a>
            </div>
            <div data-submenu_item={true}  data-submenu_key='login' data-submenu_position='footer'>
                <a href='/logout' title='Logout'>登出</a>
            </div>
            <div data-submenu_item={true} data-submenu_key='logpeople'>
                <a href='/pay-history' title='Pay History'>購買紀錄</a>
            </div>
        </HeaderBar>
    </div>;
}
```
#### LESS
```less
@import (inline) '../node_modules/header-bar/lib/css/index.css';
```

### Demo
```bash
cd node_module/header-bar/demo
npm install
npm start
```
Open demo page on *http://localhost:3000*