--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/DiagramLegend.vue	Wed Mar 27 18:12:42 2019 +0100
@@ -0,0 +1,58 @@
+<template>
+  <div :class="['border-right', { collapsed }]" id="diagram-legend">
+    <span class="box-control toggle" @click="collapsed = !collapsed">
+      <font-awesome-icon icon="angle-left" fixed-width />
+    </span>
+    <div style="overflow: hidden">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style lang="sass" scoped>
+#diagram-legend
+  position: relative
+  width: 280px
+  .toggle
+    margin-left: 0
+    position: absolute
+    top: 0.25rem
+    left: 0.25rem
+    svg
+      transition: transform 0.3s
+  &.collapsed
+    width: 0
+    .toggle
+      left: 0.25rem
+      svg
+        transform: rotateY(180deg)
+</style>
+
+<script>
+/* This is Free Software under GNU Affero General Public License v >= 3.0
+ * without warranty, see README.md and license for details.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * License-Filename: LICENSES/AGPL-3.0.txt
+ *
+ * Copyright (C) 2018 by via donau
+ *   – Österreichische Wasserstraßen-Gesellschaft mbH
+ * Software engineering by Intevation GmbH
+ *
+ * Author(s):
+ * Markus Kottländer <markus.kottlaender@intevation.de>
+ */
+
+export default {
+  data() {
+    return {
+      collapsed: false
+    };
+  },
+  watch: {
+    collapsed() {
+      this.$nextTick(this.$parent.drawDiagram);
+    }
+  }
+};
+</script>