--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/Sidebar.vue	Thu Nov 22 07:07:12 2018 +0100
@@ -0,0 +1,186 @@
+<template>
+    <div :class="sidebarStyle">
+        <div
+            @click="$store.commit('application/showSidebar', !showSidebar)"
+            class="menubutton p-2 bg-white rounded position-absolute d-flex justify-content-center"
+        >
+            <i class="ui-element d-print-none fa fa-bars"></i>
+        </div>
+        <div :class="menuStyle">
+            <div class="menupoints" v-if="this.showSidebar">
+                <router-link to="/" class="text-body d-flex flex-row nav-link">
+                    <i class="fa fa-map-o align-self-center navicon"></i>Map
+                </router-link>
+                <div class="d-flex flex-row nav-link">
+                    <i class="fa fa-ship align-self-center navicon"></i>
+                    <a
+                        class="text-body d-flex flex-row"
+                        href="#"
+                        @click="toggleContextBox('bottlenecks')"
+                    >Bottlenecks</a>
+                </div>
+                <div v-if="isSysAdmin">
+                    <hr>
+                    <div class="nav-link d-flex menupadding text-muted">Administration</div>
+                </div>
+                <div v-if="isWaterwayAdmin">
+                    <div class="d-flex flex-row nav-link">
+                        <i class="fa fa-upload align-self-center navicon"></i>
+                        <a
+                            href="#"
+                            class="text-body"
+                            @click="toggleContextBox('imports')"
+                        >Import soundingresults</a>
+                    </div>
+                    <div class="d-flex flex-row nav-link">
+                        <i class="fa fa-list-ol align-self-center navicon"></i>
+                        <a
+                            href="#"
+                            class="text-body"
+                            @click="toggleContextBox('staging')"
+                        >Staging area</a>
+                    </div>
+                    <div class="nav-link d-flex menupadding text-muted">Systemadministration</div>
+                    <router-link class="text-body d-flex flex-row nav-link" to="usermanagement">
+                        <i class="fa fa-address-card-o align-self-center navicon"></i>Users
+                    </router-link>
+                </div>
+                <div v-if="isSysAdmin">
+                    <router-link
+                        class="text-body d-flex flex-row nav-link"
+                        to="systemconfiguration"
+                    >
+                        <i class="fa fa-wrench align-self-center navicon"></i>Systemconfiguration
+                    </router-link>
+                    <router-link class="text-body d-flex flex-row nav-link" to="logs">
+                        <i class="fa fa-book align-self-center navicon"></i>Logs
+                    </router-link>
+                    <router-link class="text-body d-flex flex-row nav-link" to="importqueue">
+                        <i class="fa fa-exchange align-self-center navicon"></i>Importqueue
+                    </router-link>
+                </div>
+                <hr>
+                <a href="#" @click="logoff" class="text-body d-flex flex-row nav-link">
+                    <i class="fa fa-power-off align-self-center navicon"></i>
+                    Logout {{ user }}
+                </a>
+            </div>
+        </div>
+    </div>
+</template>
+
+<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):
+ * Thomas Junk <thomas.junk@intevation.de>
+ * Markus Kottländer <markus.kottlaender@intevation.de>
+ */
+import { mapGetters, mapState } from "vuex";
+
+export default {
+  name: "sidebar",
+  props: ["routeName"],
+  computed: {
+    ...mapGetters("user", ["isSysAdmin", "isWaterwayAdmin"]),
+    ...mapState("user", ["user"]),
+    ...mapState("application", [
+      "showSidebar",
+      "showSearchbarLastState",
+      "showInContextBox"
+    ]),
+    menuStyle() {
+      return {
+        menu: true,
+        nav: true,
+        "flex-column": true
+      };
+    },
+    sidebarStyle() {
+      return [
+        "ui-element position-relative sidebar rounded shadow-xs d-print-none mb-auto",
+        {
+          sidebarcollapsed: !this.showSidebar,
+          sidebarextended: this.showSidebar
+        }
+      ];
+    }
+  },
+  methods: {
+    logoff() {
+      this.$store.commit("user/clearAuth");
+      this.$store.commit("application/showSidebar", false);
+      this.$store.commit("application/showUsermenu", false);
+      this.$store.commit("application/showSplitscreen", false);
+      this.$router.push("/login");
+    },
+    toggleContextBox(context) {
+      const SHOW = context;
+      const HIDE = null;
+      const isElementAlreadyShown = this.showInContextBox === context;
+      let toggleState =
+        isElementAlreadyShown && this.routeName === "mainview" ? HIDE : SHOW;
+      this.$router.push("/");
+      this.$store.commit("application/showInContextBox", toggleState);
+      if (this.showInContextBox === context) {
+        this.$store.commit("application/showSearchbar", true);
+      } else {
+        this.$store.commit(
+          "application/showSearchbar",
+          this.showSearchbarLastState
+        );
+      }
+    }
+  }
+};
+</script>
+
+<style lang="sass" scoped>
+
+a:hover
+  text-decoration: none
+
+.menupoints
+  text-align: left
+
+.menubutton
+  height: $icon-height
+  width: $icon-width
+  top: 0
+  left: 0
+  color: #666
+
+.router-link-exact-active
+  background-color: #f2f2f2
+
+.navicon
+  margin-right: $small-offset
+  color: #666
+
+.menu
+  padding-top: $small-offset
+
+.sidebar
+  background-color: #ffffff
+  padding-top: $large-offset
+  opacity: $slight-transparent
+
+.sidebarcollapsed
+  height: 30px
+  width: 30px
+  transition: $transition-fast
+
+.sidebarextended
+  height: 35rem
+  width: $sidebar-width
+  min-width: $sidebar-width
+</style>