HISTORY:

- 2017-03-09, MG, Inicijalni dokument


# Appbar


## Props proposal

`leftIcon`: React.element 

Vidi [Grommet icon](https://grommet.github.io/docs/icon). Ako nije 
definirana na phone rezoluciji uzima se defaultna icona (`defaultLeftIcon`)<hr/>

>Igor(09.03.2017.): Ako mislimo da default icon nešto radi onda bi trebao exposati event koji ću pozvati na klik ikone. Ako je to pak tako onda bi taj bio isti i za leftIcon od leftText.

>Mario(09.03.2017.): Problem definitivno postoji. Ja sam razmišljao (krivo!), ako prosljedim
React.Element za ikonu da mi ne treba event handler. To je točno, evo primjera [Grommet.AppbarIconNode](https://codepen.io/gimei/pen/WppbGO), ali to je samo jedan partikularan slučaj i definitivno nije keep-it-simple logika. Zato bih se priklonio tvom zaključku i dodao leftClickHandler prop. Na žalost, moramo imati icon kao React.Element jer bih svakako nastojao podržati
SVG ikone umjesto webfontova.

`leftClickHandler`: function (callback handler za onClick event na `leftIcon` i `leftText`)

`leftText`: string

Ako su definirani `leftIcon` i `leftText`, onda se `leftIcon` koristi na phone rezolucijama,
a `leftText` na desktop rezoluciji.<hr/>

`middleText`: string

Ne renderira se na tablet i manjim rezolucijama.Default is `null`. <hr/>

`middleAlignSelf` <del>`middleAlign`</del>: `(start|center|end)` <del>`(left, center, right)`</del>del>, 
>Igor(09.03.2017.): Da li nam ovo treba. Text će expandati taj dio po potrebi tako da nema potrebe za centriranjem. <br/>
>Igor(09.03.2017.): Ako nam treba nazvao bih ga middleJustify kao i u grommetu...<br/>
>Igor(09.03.2017.): Ako nam treba vrijednosti bi mu bile (start, center, end) kao i u grommetu...

>Mario(09.03.2017.): Ovisi o implementaciji. Željeni efekt vidi na [CodePenu](https://codepen.io/gimei/pen/evvNMN). U mojoj implementaciji pravi
atribut je `alignSelf`, a moguće vrijednosti `start|center|end`. Testirao sam u Chrome, Safari, Firefox. Mislim da nije `justify` jer taj attribut poravnava iteme međusobno. <ins>U konačnici, atrubut uskladi sa svojom implementacijom.</ins>

Accros main axis (horizontal alignment). Default is `start` <del>`left`</del>.<hr/>

`rightBar`: React.element<hr/>

`rightAlign`:  (left, center, right)
>Igor(09.03.2017.): Ista druga dva komentara kao i za middleAlign...

>Mario(09.03.2017.): Uskladi sa svojom implementacijom atributa (kao i prethodno).


rightBar alignment. Default is `right`.<hr/>

`rightIcon`: React.element

Na phone rezoluciji se renderira umjesto linkbara. Ako nije definirana
uzima se defaultna ikona (`defaultRightIcon`).<hr/>

`rightList`: React.element

Na phone rezolucijama, klikom na `rightIcon`, renderira se kao right layer.
Ako je `rightBar`undefined i `rightList`defined, onda vrijedi isto i za tablet i desktop
rezolucije.<hr>

`pad`: [ none | small | medium | large | {...} ](https://grommet.github.io/docs/box)

Default is `small`.<hr/>

`fixed`: bool

Appbar se ne scrolla, fiksiran je na stranici, vidi [Header](https://grommet.github.io/docs/header) kontrolu za referencu. Default is `true`.<hr/>




## Primjeri (kombinacije)

Raznim kombinacijama props, možemo renderirati ovakve primjere:

[Appbar1](https://bitbucket.org/sedmiodjel/espa-ui/downloads/Appbar1.png)
[Appbar2](https://bitbucket.org/sedmiodjel/espa-ui/downloads/Appbar2.png)
[Appbar3](https://bitbucket.org/sedmiodjel/espa-ui/downloads/Appbar3.png)
[Appbar4](https://bitbucket.org/sedmiodjel/espa-ui/downloads/Appbar4.png)


### DESKTOP SIZE

`leftIcon`, `middleText`, `rightAlign=left`

```
 --------------------------------------------------------
|        |             |                                 |
|  LEFT  | MIDDLE      | RIGHT                           |
|        |             |                                 |
 --------------------------------------------------------
```


`leftIcon`, `rightAlign=left`, `middleText=undefined`
[More realistic example of this](https://bitbucket.org/sedmiodjel/espa-ui/downloads/Appbar1.png)

```
 ------------------------------------------
|        |                                 |
|  LEFT  | RIGHT                           |
|        |                                 |
 ------------------------------------------
```


`leftIcon`, `rightAlign=right`, `middleText=undefined`

```
 ------------------------------------------
|        |                                 |
|  LEFT  |                           RIGHT |
|        |                                 |
 ------------------------------------------
```


`leftIcon`, `rightAlign=center`, `middleText=undefined`

```
 ----------------------------------------
|        |                               |
|  LEFT  |            RIGHT              |
|        |                               |
 ----------------------------------------

```

### PHONE SIZE

`middleText` se ne renderira, renderira se `rightIcon`umjesto `rightBar` i 
`leftIcon` umjesto `leftText`ako je zadan.

```
 --------------------------
|        |         |       |
|  LEFT  |         | RIGHT |
|        |         |       |
 --------------------------
```


### TABLET SIZE

`middleText` se ne renderira

```
 -----------------------------
|        |                    |
|  LEFT  | RIGHT              |
|        |                    |
 -----------------------------
```