update Kit to display a node

src/pages/Kit.vue

@@ -1,18 +1,28 @@
 <template>
   <div class="kit">
-    <kit-list />
+    <kit-list @open-node="openNode" />
+
+    <kit-view
+      v-if="sheet !== null"
+      :sheet="sheet"
+      @close-node="closeNode"
+      @open-node="openLibrary"
+    />
   </div>
 </template>
 
 <script>
-import { KitList } from '@/pages/kit'
+import { mapGetters } from 'vuex'
+
+import { KitList, KitView } from '@/pages/kit'
 
 
 export default {
   name: 'Kit',
 
   components: {
-    KitList
+    KitList,
+    KitView
   },
 
   data () {
@@ -20,6 +30,25 @@ export default {
     }
   },
 
+  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')
   }
@@ -30,5 +59,17 @@ export default {
 .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>