--- a/client/src/components/Sidebar.vue	Thu Nov 22 12:25:01 2018 +0100
+++ b/client/src/components/Sidebar.vue	Thu Nov 22 12:40:45 2018 +0100
@@ -6,65 +6,56 @@
         >
             <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 class="menu text-nowrap text-left">
+              <router-link to="/">
+                  <i class="fa fa-map-o"></i>
+                  Map
+              </router-link>
+              <a href="#"
+                 @click="toggleContextBox('bottlenecks')"
+                 :class="['secondary', { active: isActive('bottlenecks') }]">
+                  <i class="fa fa-ship"></i>
+                  Bottlenecks
+              </a>
+              <div v-if="isWaterwayAdmin">
+                <a href="#"
+                   @click="toggleContextBox('imports')"
+                   :class="['secondary', { active: isActive('imports') }]">
+                      <i class="fa fa-upload align-self-center navicon"></i>
+                      Import soundingresults
+                  </a>
+                  <a href="#"
+                     @click="toggleContextBox('staging')"
+                     :class="['secondary', { active: isActive('staging') }]">
+                      <i class="fa fa-list-ol align-self-center navicon"></i>
+                      Staging area
+                  </a>
+                  <small class="text-muted pl-3">Systemadministration</small>
+                  <hr class="m-0">
+                  <router-link to="usermanagement">
+                      <i class="fa fa-address-card-o"></i>
+                      Users
+                  </router-link>
+              </div>
+              <div v-if="isSysAdmin">
+                  <router-link to="systemconfiguration">
+                      <i class="fa fa-wrench"></i>
+                      Systemconfiguration
+                  </router-link>
+                  <router-link to="logs">
+                      <i class="fa fa-book"></i>
+                      Logs
+                  </router-link>
+                  <router-link to="importqueue">
+                      <i class="fa fa-exchange"></i>
+                      Importqueue
+                  </router-link>
+              </div>
+              <hr class="m-0">
+              <a href="#" @click="logoff">
+                  <i class="fa fa-power-off"></i>
+                  Logout {{ user }}
+              </a>
         </div>
     </div>
 </template>
@@ -96,15 +87,9 @@
     ...mapState("application", [
       "showSidebar",
       "showSearchbarLastState",
-      "contextBoxContent"
+      "contextBoxContent",
+      "showContextBox"
     ]),
-    menuStyle() {
-      return {
-        menu: true,
-        nav: true,
-        "flex-column": true
-      };
-    },
     sidebarStyle() {
       return [
         "ui-element position-relative sidebar rounded shadow-xs d-print-none mb-auto",
@@ -128,19 +113,19 @@
       this.$store.commit("application/showContextBox", true);
       this.$store.commit("application/contextBoxContent", context);
       this.$store.commit("application/showSearchbar", true);
+    },
+    isActive(item) {
+      return (
+        this.showContextBox &&
+        this.contextBoxContent === item &&
+        this.routeName == "mainview"
+      );
     }
   }
 };
 </script>
 
 <style lang="sass" scoped>
-
-a:hover
-  text-decoration: none
-
-.menupoints
-  text-align: left
-
 .menubutton
   height: $icon-height
   width: $icon-width
@@ -148,28 +133,43 @@
   left: 0
   color: #666
 
-.router-link-exact-active
-  background-color: #f2f2f2
-
-.navicon
-  margin-right: $small-offset
-  color: #666
-
 .menu
-  padding-top: $small-offset
+  a
+    display: block
+    text-align: left
+    padding: 0.5rem 1rem
+    color: #333
+    text-decoration: none
+    i
+      color: #666
+      margin-right: $small-offset
+    &:hover
+      background-color: #f8f8f8
+    &.router-link-exact-active
+      background-color: $color-info
+      color: #fff
+      i
+        color: #fff
+    &.secondary
+      font-size: 0.9rem
+      &.active
+        background: lighten($color-info, 55)
+        color: darken($color-info, 15)
+        i
+          color: darken($color-info, 15)
 
 .sidebar
   background-color: #ffffff
   padding-top: $large-offset
   opacity: $slight-transparent
+  transition: $transition-fast
+  overflow: hidden
 
 .sidebarcollapsed
-  height: 30px
-  width: 30px
-  transition: $transition-fast
+  max-height: 30px
+  max-width: 30px
 
 .sidebarextended
-  height: 35rem
-  width: $sidebar-width
-  min-width: $sidebar-width
+  max-height: 35rem
+  max-width: $sidebar-width
 </style>