--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/Sidebar.vue	Tue Jun 26 17:26:34 2018 +0200
@@ -0,0 +1,49 @@
+<template>
+  <div class="sidebar">
+    <nav class="nav flex-column">
+      <a class="nav-link active" href="#">Active</a>
+      <a class="nav-link" href="#">Link</a>
+      <a class="nav-link" href="#">Link</a>
+      <a class="nav-link disabled" href="#">Disabled</a>
+    </nav>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "sidebar",
+  computed: {
+    sidebarStyle() {
+      return {
+        sidebarcollapsed: this.collapsed,
+        sidebarextended: this.collapsed
+      };
+    }
+  },
+  data() {
+    return {
+      collapsed: false
+    };
+  }
+};
+</script>
+
+<style lang="scss">
+@import "../assets/application.scss";
+
+$sidebar-full-width: 150px;
+
+$sidebar-collapsed-width: 80px;
+
+.sidebar {
+  padding-top: $large-offset;
+}
+
+.sidebarcollapsed {
+  width: $sidebar-collapsed-width;
+}
+
+.sidebarextended {
+  width: $sidebar-full-width;
+}
+</style>