<template>
  <div id="app">
    <div :class="$style.container">

    </div>
    <sidebar/>

    <div :class="$style.toggles">
      <sidebar-toggle :sidebarComponent="addForm" :icon="searchIcon"/>
      <sidebar-toggle :sidebarComponent="searchForm" :icon="addIcon"/>
    </div>
  </div>
</template>

<script>
import Sidebar from './components/sidebar.vue'
import SidebarToggle from './components/sidebarToggle.vue'
import AddForm from './components/addForm.vue'
import SearchForm from './components/searchForm.vue'
import SearchIcon from './icons/search.vue'
import AddIcon from './icons/add.vue'

export default {
  name: 'app',
  components: {
    Sidebar, SidebarToggle
  },
  data () {
    return {
      addForm: AddForm,
      searchForm: SearchForm,
      searchIcon: SearchIcon,
      addIcon: AddIcon
    }
  }
}
</script>