--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/application/Sidebar.vue	Fri Sep 07 11:13:56 2018 +0200
@@ -0,0 +1,89 @@
+<template>
+  <div :class="sidebarStyle">
+    <div :class="menuStyle">
+      <router-link to="/" class="text-body d-flex flex-row nav-link">
+        <i class="fa fa-map-o align-self-center navicon"></i>Riverbed Morphology</router-link>
+      <div v-if="isSysAdmin">
+        <hr/>
+        <div class="nav-link d-flex menupadding text-muted">Administration</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>
+    <User></User>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import User from "./User";
+
+export default {
+  name: "sidebar",
+  components: {
+    User: User
+  },
+  computed: {
+    ...mapGetters("user", ["isSysAdmin"]),
+    ...mapGetters("application", ["sidebarCollapsed"]),
+    menuStyle() {
+      return {
+        menu: true,
+        nav: true,
+        "flex-column": true
+      };
+    },
+    sidebarStyle() {
+      return {
+        "ui-element": true,
+        sidebar: true,
+        overlay: true,
+        sidebarcollapsed: this.sidebarCollapsed,
+        sidebarextended: !this.sidebarCollapsed,
+        shadow: true
+      };
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import "./assets/application.scss";
+
+.router-link-exact-active {
+  background-color: #f2f2f2;
+}
+
+.navicon {
+  margin-right: $small-offset;
+}
+
+.menu {
+  padding-top: 5vh;
+  height: 90%;
+}
+
+.sidebar {
+  top: 0;
+  background-color: #ffffff;
+  padding-top: $large-offset;
+  height: 100vh;
+  opacity: 0.96;
+}
+
+.overlay {
+  position: absolute;
+  z-index: -1;
+}
+
+.sidebarcollapsed {
+  transition: $transition;
+  left: -250px;
+}
+
+.sidebarextended {
+  transition: $transition;
+  left: 0;
+}
+</style>