<template>
  <div id="app">
    <router-view transition transition-mode="out-in">
    </router-view>
    <tabbar>
      <tabbar-item is-link v-link="'/'">
        <i slot="icon" class="fa fa-home" aria-hidden="true"></i>
        <span slot="label">Home</span>
      </tabbar-item>
      <tabbar-item is-link v-link="'/lights'">
        <i slot="icon" class="fa fa-lightbulb-o" aria-hidden="true"></i>
        <span slot="label">Lights</span>
      </tabbar-item>
      <tabbar-item is-link v-link="'/sprinklers'">
        <img slot="icon" src="assets/images/sprinklers.svg">
        <span slot="label">Sprinklers</span>
      </tabbar-item>
      <tabbar-item is-link v-link="'/shutters'">
        <img slot="icon" src="assets/images/shutters.svg">
        <span slot="label">Rolling shutter</span>
      </tabbar-item>
      <tabbar-item is-link v-link="'/timers'">
        <i slot="icon" class="fa fa-clock-o" color="black" aria-hidden="true"></i>
        <span slot="label">Timers</span>
      </tabbar-item>
      <tabbar-item is-link v-link="'/settings'">
        <i slot="icon" class="fa fa-bars" aria-hidden="true"></i>
        <span slot="label">Settings</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
import Tabbar from 'vux/dist/components/tabbar'
import TabbarItem from 'vux/dist/components/tabbar-item'

export default {
  components: {
    Tabbar,
    TabbarItem
  }
}

</script>

<style>
@import '~vux/dist/vux.css';
@import '~font-awesome/css/font-awesome.css';
body {
  font-family: Helvetica, sans-serif;
  background-color: #fbf9fe;
  padding-bottom:50px;
}

.fa-home {
  color: black;
}

.fa-lightbulb-o {
  color: black;
}

.fa-clock-o {
  color: black;
}

.fa-bars {
  color: black;
}

</style>
