add LegendToggle component

src/components/globals/ButtonZoom.vue

@@ -36,8 +36,13 @@ export default {
 <style lang="scss" scoped>
 .btn-zoom {
   position: absolute;
-  top: 24px;
-  right: 24px;
+  top: 9px;
+  right: 9px;
+
+  @include media-breakpoint-up($size-bp) {
+    top: 24px;
+    right: 24px;
+  }
 }
 
 .btn-zoom-item {

src/components/globals/LegendToggle.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="legend-toggle">
+    <b-button
+      variant="dark"
+      class="btn-legend-toggle"
+      :class="visible ? null : 'collapsed'"
+      :aria-expanded="visible ? 'true' : 'false'"
+      aria-controls="collapse-legend-toggle"
+      @click="onBtnClick"
+    >
+      <span>?</span>
+    </b-button>
+
+    <b-collapse id="collapse-legend-toggle" v-model="visible">
+      <div class="collapse-body" ref="body">
+        <slot name="default" />
+      </div>
+    </b-collapse>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LegendToggle',
+
+  data () {
+    return {
+      visible: false
+    }
+  },
+
+  methods: {
+    onBtnClick () {
+      this.visible = !this.visible
+      if (this.visible) {
+        document.addEventListener('mousedown', this.onDocumentClick, { capture: true })
+      }
+    },
+
+    onDocumentClick (e) {
+      if (this.$refs.body.contains(e.target)) return
+      document.removeEventListener('mousedown', this.onDocumentClick, { capture: true })
+      if (!e.target.classList.contains('btn')) {
+        this.visible = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.legend-toggle {
+  position: absolute;
+  z-index: 1;
+  top: 15px;
+  left: 15px;
+
+  @include media-breakpoint-up($size-bp) {
+    top: 30px;
+    left: 30px;
+  }
+}
+
+.btn-legend-toggle {
+  display: block;
+  width: $btn-size;
+  height: $btn-size;
+  padding: 0;
+  border: 0;
+  font-weight: $font-weight-bold;
+  // font-size: 1.7rem;
+  line-height: 1;
+
+  margin-bottom: 10px;
+
+  span {
+    pointer-events: none;
+  }
+}
+
+.collapse {
+  transition: none;
+}
+
+.collapse-body {
+  max-width: 500px;
+  margin-right: 15px;
+  border: $line;
+  background-color: $white;
+  padding: $node-card-spacer-y $node-card-spacer-x;
+
+  @include media-breakpoint-up($size-bp) {
+    margin-right: 30px;
+  }
+}
+</style>

src/components/nodes/NodeView.vue

@@ -68,7 +68,8 @@ export default {
 
   data () {
     return {
-      scrollValue: 0
+      scrollValue: 0,
+      h: 0
     }
   },