HISTORY:

- 2017-03-09, MG, Inicijalni dokument

# Linkbar component

Linkbar je horizontalno renderirana lista gumbova/linkova 
([Primjer 1](https://bitbucket.org/sedmiodjel/espa-ui/downloads/Linkbar1.png),
[Primjer 2](https://bitbucket.org/sedmiodjel/espa-ui/downloads/Linkbar2.png))

## Props proposal

### Component props

**`items`**: `array, optional, default=[]`, Array of items. Each item is defined as `{text, icon, active, <del>handler</del>onClick}` (vidi One item props).

---

**`activeItemId`**: `number, optional`, Id itema na koji će se primjeniti `active` classname (active je predefinirana css klasa u Grommetu).

---

**`textPosition`**: `enum(left | right | top | bottom), default='bottom'`: 
Pozicija teksta u odnosu na ikonu. Ukoliko ikona nije definirana, ovaj atribut se ignorira.

#### One item props

**`id`**: `string|number, required`, item identificator

---

**`text`**: `string, optional`, samostalni text ili text ispod ikone  

---

**`icon`**: `React.element, optional`, ikona 

---

**`<del>handler</del>onClick`**: `string | function, optional`
> Mario(2018-03-10): TODO: handler promjenjen u onClick

#### Primjer

```javascript
let items = [
  {id: 10, text: 'Open', icon: <FolderOpenIcon />, onClick: openHandler},
  {id: 11, text: 'New', icon: <NewIcon />, : 'documents/new' }
];
```

HINT: processing onClick prop (koncept se vidi na 
[ovom penu](http://codepen.io/gimei/pen/BWWgey?editors=0010))

```javascript
onItemHandler = item => {
  if (typeof item.onClick === 'string')
    item.handler.startsWith('http://')
      browser.navigate(item.onClick); //leaving app
    else
      this.context.router.push(item.onClick);  //app internal link
  else if (typeof item.onClick === 'function')
    onClick(item);
}
```