npm package: @methodexists/ant-header
Description: Header component for projects based on antd library
Latest version: 0.1.0

# ant-header

Header component for projects based on antd library

## Usage

Use `<Header />` component in your `app` route to show app-wide tools and navigation menu button.

### Minimal

```
<Header
  onSwitchSider={() => this.setState({ isSiderCollapsed: !isSiderCollapsed })}
  isSiderCollapsed={isSiderCollapsed}
  navMenu={<Sider />}
/>
```
Will render header with navigation menu button only.

### Feedback button

```
<Header
  ...
  bugReporter={{
    apiUrl: 'myApi/bugs',
    supportEmail: 'support@example.com'
  }}
/>
```
Will render feedback button with name taken from `App.header.techSupport` ('Support' by default).  
When clicked will show Bug Reporter form. You can define translations for Bug Reporter form using these ids:   

```  
id: 'BugReporter.placeholder', defaultMessage: 'Leave us a message',
id: 'BugReporter.success', defaultMessage: 'Your message has been sent',
id: 'BugReporter.send', defaultMessage: 'Send',
id: 'BugReporter.help', defaultMessage: 'Don’t forget to describe what you did, what you saw happened and what you expected to happen. Please mention how critical it is.',
id: 'BugReporter.requiredWarning', defaultMessage: 'Please leave us a message',
id: 'BugReporter.sendError', defaultMessage: 'Error sending the message',
id: 'BugReporter.contactUs', defaultMessage: 'If you have problems leaving a message you can contact us via email directly:'
```

### Locale selector

```
<Header
  ...
  localeSelector={{
    onSwitchLocale: l => console.info('locale switch call', l),
    locales: { en: { name: 'English' }, es: { name: 'Espanol' } },
  }}
/>
```

Will render locale selector dropdown where user can select app locale.

### Profile menu

```
<Header
  ...
  profileMenu={{
    onProfilePageClick: () => console.info('go to profile page'),
    onSignOutClick: () => console.info('sign out'),
    username: 'John Doe',
  }}
/>
```
Will render profile menu dropdown titled by `username`. The dropdown will have two items: 'My profile' and 'Sign out'. They could be translated by declaring these ids:

```
id: 'App.header.signOut', defaultMessage: 'Sign Out',
id: 'App.header.myProfile', defaultMessage: 'My Profile'
```

### Custom content
```
<Header ...>
  <div>Custom content</div>
</Header>
```
Will render custom content in the center of the header.


### Compact view
```
<Header
  bugReporter=...
  localeSelector=...
  profileMenu=...
  isCompact={true}
/>
```
Will render buttons in compact mode: no text, icons only.

### Sider popover
```
<Header
  isSiderPopover={true}
/>
```
Will render navigation menu as a popover


## API

### <Header /> props

| Prop             | Type                         | Default     | Description
| ---------------- | ---------------------------- | ----------- | ------------
| hasSider         | bool                         | `false`     | If true show Sider button
| navMenu          | element                      | `undefined` | Content to show in the navigation popover
| onSwitchSider    | func                         | `undefined` | Fired when the navigation button is clicked
| isSiderCollapsed | bool                         | `true`      | Affects the navigation button icon
| isSiderPopover   | bool                         | `false`     | If true, the `navMenu` content will be presented in a popover when the navigation button is clicked
| isCompact        | bool                         | `false`     | If true, will show tools buttons without text, icons only
| extra            | element or array of elements | `undefined` | Show extra components near the buttons
| bugReporter      | object                       | `undefined` | When defined will show Bug Reporter button
| localeSelector   | object                       | `undefined` | When defined will show Locale Selector
| profileMenu      | object                       | `undefined` | When defined will show Profile Menu

#### `bugReporter` props

| Prop             | Type   | Description
|------------------|--------|------------
| `*`apiUrl        | string | The URL where to post bug report message
| `*`supportEmail  | string | Email address to show in the bug reporter form

#### `localeSelector` props

| Prop               | Type     | Description
|--------------------|----------|-------------
| `*`locales         | object   | Object key should be lang name ('en', 'es', ...) and the value is `{ name }` object. `name` will be displayed in the menu.
| `*`onSwitchLocale  | func     | Called when dropdown item is selected. Receives lang name as an argument.

#### `profileMenu` props

| Prop                   | Type   | Description
|------------------------|--------|--------------
| `*`username            | string | User name to show as a button title
| `*`onProfilePageClick  | func   | Called when 'My Profile' item is clicked
| `*`onSignOutClick      | func   | Called when 'Sign out' item is clicked

## Contributing

See [CONTRIBUTING.md](CONTRIBUTING.md) for how to develop a component.