--- a/client/src/components/Sidebar.vue	Mon Jul 30 13:31:35 2018 +0200
+++ b/client/src/components/Sidebar.vue	Mon Jul 30 16:02:19 2018 +0200
@@ -2,10 +2,13 @@
   <div :class="sidebarStyle">
     <div :class="collapseStyle"><i @click="collapse" :class="collapseicon"></i></div>
     <nav :class="menuStyle">
-      <a class="nav-link active" href="#">Riverbed morphology</a>
+      <router-link to="/">Riverbed Morphology</router-link>
       <a class="nav-link" href="#">Link</a>
       <a class="nav-link" href="#">Link</a>
       <a class="nav-link disabled" href="#">Disabled</a>
+      <div v-if="is_waterway_admin">
+        <router-link to="users">Users</router-link>
+      </div>
     </nav>
     <div :class="userinfoStyle">
       <div class="userinfo">
@@ -23,8 +26,9 @@
 
 export default {
   name: "sidebar",
+  props: ["isOverlay"],
   computed: {
-    ...mapGetters("user", ["userinfo"]),
+    ...mapGetters("user", ["userinfo", "is_waterway_admin"]),
     collapseicon() {
       return {
         fa: true,
@@ -59,6 +63,7 @@
     sidebarStyle() {
       return {
         sidebar: true,
+        overlay: this.isOverlay,
         sidebarcollapsed: this.collapsed,
         sidebarextended: !this.collapsed
       };
@@ -130,13 +135,16 @@
   margin-top: auto;
 }
 .sidebar {
-  position: absolute;
-  z-index: 1;
   background-color: #ffffff;
   padding-top: $large-offset;
   height: 100vh;
 }
 
+.overlay {
+  position: absolute;
+  z-index: 1;
+}
+
 .sidebarcollapsed {
   width: $sidebar-collapsed-width;
   transition: $transition;

--- a/client/src/router.js	Mon Jul 30 13:31:35 2018 +0200
+++ b/client/src/router.js	Mon Jul 30 16:02:19 2018 +0200
@@ -1,6 +1,7 @@
 import Vue from "vue";
 import Router from "vue-router";
 import Login from "./views/Login.vue";
+import Users from "./views/Users.vue";
 import Main from "./views/Main.vue";
 import store from "./store";
 import { sessionStillActive, toMillisFromString } from "./lib/session";
@@ -15,6 +16,22 @@
       component: Login
     },
     {
+      path: "/users",
+      name: "users",
+      component: Users,
+      meta: {
+        requiresAuth: true
+      },
+      beforeEnter: (to, from, next) => {
+        const isWaterwayAdmin = store.getters["user/is_waterway_admin"];
+        if (!isWaterwayAdmin) {
+          next("/");
+        } else {
+          next();
+        }
+      }
+    },
+    {
       path: "/",
       name: "mainview",
       component: Main,

--- a/client/src/stores/user.js	Mon Jul 30 13:31:35 2018 +0200
+++ b/client/src/stores/user.js	Mon Jul 30 16:02:19 2018 +0200
@@ -20,6 +20,9 @@
     },
     expires: state => {
       return state.expires;
+    },
+    is_waterway_admin: state => {
+      return state.roles.includes("waterway_admin");
     }
   },
   mutations: {

--- a/client/src/views/Main.vue	Mon Jul 30 13:31:35 2018 +0200
+++ b/client/src/views/Main.vue	Mon Jul 30 16:02:19 2018 +0200
@@ -1,6 +1,6 @@
 <template>
   <div class="main d-flex">
-    <Sidebar></Sidebar>
+    <Sidebar v-bind:isOverlay="true"></Sidebar>
     <Map></Map>
   </div>
 </template>

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/views/Users.vue	Mon Jul 30 16:02:19 2018 +0200
@@ -0,0 +1,29 @@
+<template>
+  <div class="main d-flex">
+    <Sidebar v-bind:isOverlay="false"></Sidebar>
+    <div class="d-flex flex-row content">
+      <h1>User Management</h1>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.main {
+  height: 100vh;
+}
+
+.content {
+  width: 99%;
+  margin-left: 1%;
+}
+</style>
+
+<script>
+import Sidebar from "../components/Sidebar";
+export default {
+  name: "userview",
+  components: {
+    Sidebar
+  }
+};
+</script>