enfrancais-app/src/pages/Kit.vue

<template>
  <div class="kit">
    <kit-list @open-node="openNode" />

    <kit-view
      v-if="sheet !== null"
      :sheet="sheet"
      @close-node="closeNode"
      @open-node="openLibrary"
    />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

import { KitList, KitView } from '@/pages/kit'


export default {
  name: 'Kit',

  components: {
    KitList,
    KitView
  },

  data () {
    return {
    }
  },

  computed: {
    ...mapGetters(['sheet'])
  },

  methods: {
    openNode (id) {
      this.$store.dispatch('OPEN_KIT_NODE', id)
    },

    openLibrary (ids) {
      this.$store.dispatch('OPEN_NODE', ids)
      this.$store.dispatch('CLOSE_KIT_NODE')
    },

    closeNode () {
      this.$store.dispatch('CLOSE_KIT_NODE')
    }
  },

  created () {
    this.$store.dispatch('INIT_KIT')
  }
}
</script>

<style lang="scss" scoped>
.kit {
  height: 100%;
  width: 100%;

  &-view {
    position: relative;
    margin-bottom: -100%;
    // compensate header border
    height: calc(100% + 2px);
    top: calc(-100% - 2px);

    @include media-breakpoint-down($layout-bp-down) {
      margin-bottom: -100vh;
    }
  }
}
</style>