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>

src/pages/kit/KitList.vue

@@ -13,6 +13,7 @@
           v-for="node in filteredNodes" :key="'kit-' + node.id"
           :node="node"
           mode="card"
+          @click.native.capture="$emit('open-node', node.id)"
         />
       </div>
     </div>
@@ -59,6 +60,8 @@ export default {
 <style lang="scss" scoped>
 .kit-list {
   padding: 1.15rem;
+  overflow-y: auto;
+  height: 100%;
 
   @include media-breakpoint-up($size-bp) {
     padding: 2.15rem;
@@ -84,5 +87,9 @@ export default {
       }
     }
   }
+
+  .node-view {
+    cursor: pointer;
+  }
 }
 </style>