# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1542195075 -3600
# Node ID 3807b6c2cfbf71dfa50550a3bdb70ea2d985b338
# Parent  a9e455c017cbc0dd7efb8976a245675f6e099a64# Parent  930fdd8b474f23a7c6514681af67260ad3c1edc1
merge

diff -r 930fdd8b474f -r 3807b6c2cfbf client/src/App.vue
--- a/client/src/App.vue	Wed Nov 14 12:23:10 2018 +0100
+++ b/client/src/App.vue	Wed Nov 14 12:31:15 2018 +0100
@@ -6,7 +6,6 @@
             </div>
             <div class="midcontainer d-flex flex-row">
                 <div class="leftcontainer">
-                    <Sidebar :routeName="routeName"></Sidebar>
                     <Bottlenecks v-if="routeName == 'mainview'"></Bottlenecks>
                 </div>
                 <div class="middle"></div>
@@ -99,7 +98,6 @@
     }
   },
   components: {
-    Sidebar: () => import("./application/Sidebar"),
     Bottlenecks: () => import("./bottlenecks/Bottlenecks"),
     Topbar: () => import("./application/Topbar"),
     Drawtool: () => import("./drawtool/Drawtool"),
diff -r 930fdd8b474f -r 3807b6c2cfbf client/src/application/Sidebar.vue
--- a/client/src/application/Sidebar.vue	Wed Nov 14 12:23:10 2018 +0100
+++ b/client/src/application/Sidebar.vue	Wed Nov 14 12:31:15 2018 +0100
@@ -1,5 +1,8 @@
 <template>
     <div :class="sidebarStyle">
+      <div @click="$store.commit('application/showSidebar', !showSidebar)" class="menubutton 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">
@@ -72,15 +75,13 @@
       };
     },
     sidebarStyle() {
-      return {
-        "ui-element": true,
-        sidebar: true,
-        overlay: true,
-        sidebarcollapsed: !this.showSidebar,
-        sidebarextended: this.showSidebar,
-        shadow: true,
-        "d-print-none": true
-      };
+      return [
+        "ui-element position-relative sidebar shadow d-print-none",
+        {
+          sidebarcollapsed: !this.showSidebar,
+          sidebarextended: this.showSidebar
+        }
+      ];
     }
   },
   methods: {
@@ -95,45 +96,40 @@
 };
 </script>
 
-<style lang="scss" scoped>
-.menupoints {
-  text-align: left;
-}
+<style lang="sass" scoped>
+.menupoints
+  text-align: left
 
-.router-link-exact-active {
-  background-color: #f2f2f2;
-}
+.menubutton
+  background-color: white
+  padding: $small-offset
+  border-radius: $border-radius
+  height: $icon-height
+  width: $icon-width
+  top: 0
+  left: 0
 
-.navicon {
-  margin-right: $small-offset;
-}
+.router-link-exact-active
+  background-color: #f2f2f2
 
-.menu {
-  padding-top: $small-offset;
-}
+.navicon
+  margin-right: $small-offset
 
-.sidebar {
-  top: $offset;
-  left: $offset;
-  background-color: #ffffff;
-  padding-top: $large-offset;
-  opacity: $slight-transparent;
-  border-radius: $border-radius;
-}
+.menu
+  padding-top: $small-offset
+
+.sidebar
+  background-color: #ffffff
+  padding-top: $large-offset
+  opacity: $slight-transparent
+  border-radius: $border-radius
 
-.overlay {
-  position: absolute;
-  z-index: -1;
-}
+.sidebarcollapsed
+  height: 30px
+  width: 30px
+  transition: $transition-fast
 
-.sidebarcollapsed {
-  height: 30px;
-  width: 30px;
-  transition: $transition-fast;
-}
-
-.sidebarextended {
-  min-height: $sidebar-height;
-  width: $sidebar-width;
-}
+.sidebarextended
+  min-height: $sidebar-height
+  min-width: $sidebar-width
 </style>
diff -r 930fdd8b474f -r 3807b6c2cfbf client/src/application/Topbar.vue
--- a/client/src/application/Topbar.vue	Wed Nov 14 12:23:10 2018 +0100
+++ b/client/src/application/Topbar.vue	Wed Nov 14 12:31:15 2018 +0100
@@ -1,8 +1,6 @@
 <template>
     <div class="topbar d-flex flex-row">
-        <div @click="$store.commit('application/showSidebar', !showSidebar)">
-            <i class="ui-element menubutton d-print-none fa fa-bars"></i>
-        </div>
+        <Sidebar :routeName="routeName"></Sidebar>
         <div v-if="routeName == 'mainview'" :class="searchbarContainerStyle">
             <div class="input-group-prepend shadow">
                 <span @click="toggleSearchbar" :class="searchButtonStyle" for="search">
@@ -43,14 +41,6 @@
   height: $icon-height
   width: $icon-width
 
-.menubutton
-  background-color: white
-  padding: $small-offset
-  border-radius: $border-radius
-  margin-left: $offset
-  height: $icon-height
-  width: $icon-width
-
 .searchcontainer
   height: $icon-height
   border-radius: 0.25rem
@@ -83,6 +73,7 @@
 
 .topbar
   padding-top: $offset
+  margin-left: $offset
   margin-right: $offset
 
 .logout
@@ -111,14 +102,16 @@
 import { HTTP } from "../application/lib/http";
 import Identify from "../identify/Identify";
 import Layers from "../layers/Layers";
+import Sidebar from "./Sidebar";
 
 const setFocus = () => document.querySelector("#search").focus();
 
 export default {
   name: "topbar",
   components: {
-    Identify: Identify,
-    Layers: Layers
+    Identify,
+    Layers,
+    Sidebar
   },
   data() {
     return {