# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1541505617 -3600
# Node ID d9e6a1f6f394a3d2f27b68f11fdfe2005cb830ee
# Parent  a4c74a95c1779796c12c193358c3e8df48d876d4
moved all collapse flags for UI elements to store
UI elements can now be expanded/collapsed via the application store

diff -r a4c74a95c177 -r d9e6a1f6f394 client/src/application/Main.vue
--- a/client/src/application/Main.vue	Tue Nov 06 11:21:29 2018 +0100
+++ b/client/src/application/Main.vue	Tue Nov 06 13:00:17 2018 +0100
@@ -1,7 +1,7 @@
 <template>
     <div class="main d-flex flex-column">
-        <Maplayer :split="isSplitscreen" :lat="6155376" :long="1819178" :zoom="11"></Maplayer>
-        <div v-if="isSplitscreen" class="profile d-flex flex-row">
+        <Maplayer :split="showSplitscreen" :lat="6155376" :long="1819178" :zoom="11"></Maplayer>
+        <div v-if="showSplitscreen" class="profile d-flex flex-row">
             <FairwayProfile
                 :additionalSurveys="additionalSurveys"
                 :height="height"
@@ -62,7 +62,7 @@
     };
   },
   computed: {
-    ...mapGetters("application", ["isSplitscreen"]),
+    ...mapState("application", ["showSplitscreen"]),
     ...mapState("fairwayprofile", [
       "currentProfile",
       "minAlt",
diff -r a4c74a95c177 -r d9e6a1f6f394 client/src/application/Sidebar.vue
--- a/client/src/application/Sidebar.vue	Tue Nov 06 11:21:29 2018 +0100
+++ b/client/src/application/Sidebar.vue	Tue Nov 06 13:00:17 2018 +0100
@@ -1,10 +1,13 @@
 <template>
     <div :class="sidebarStyle">
         <div :class="menuStyle">
-            <div class="menupoints" v-if="!this.sidebarCollapsed">
+            <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>Riverbed Morphology</router-link>
-                <a v-if="routeName == 'mainview'" href="#" class="text-body d-flex flex-row nav-link" @click="$store.commit('application/toggleBottlenecks');">
+                <a v-if="routeName == 'mainview'"
+                   href="#"
+                   class="text-body d-flex flex-row nav-link"
+                   @click="$store.commit('application/showBottlenecks', !showBottlenecks);">
                     Bottlenecks
                 </a>
                 <div v-if="isSysAdmin">
@@ -41,14 +44,14 @@
  * Thomas Junk <thomas.junk@intevation.de>
  * Markus Kottländer <markus.kottlaender@intevation.de>
  */
-import { mapGetters } from "vuex";
+import { mapGetters, mapState } from "vuex";
 
 export default {
   name: "sidebar",
   props: ["routeName"],
   computed: {
     ...mapGetters("user", ["isSysAdmin"]),
-    ...mapGetters("application", ["sidebarCollapsed"]),
+    ...mapState("application", ["showSidebar", "showBottlenecks"]),
     menuStyle() {
       return {
         menu: true,
@@ -61,8 +64,8 @@
         "ui-element": true,
         sidebar: true,
         overlay: true,
-        sidebarcollapsed: this.sidebarCollapsed,
-        sidebarextended: !this.sidebarCollapsed,
+        sidebarcollapsed: !this.showSidebar,
+        sidebarextended: this.showSidebar,
         shadow: true,
         "d-print-none": true
       };
diff -r a4c74a95c177 -r d9e6a1f6f394 client/src/application/Topbar.vue
--- a/client/src/application/Topbar.vue	Tue Nov 06 11:21:29 2018 +0100
+++ b/client/src/application/Topbar.vue	Tue Nov 06 13:00:17 2018 +0100
@@ -1,6 +1,6 @@
 <template>
     <div class="topbar d-flex flex-row">
-        <div @click="toggleSidebar">
+        <div @click="$store.commit('application/showSidebar', !showSidebar)">
             <i class="ui-element menubutton d-print-none fa fa-bars"></i>
         </div>
         <div v-if="routeName == 'mainview'" :class="searchbarContainerStyle">
@@ -10,8 +10,8 @@
                 </span>
             </div>
             <div class="searchgroup">
-                <input @keyup.enter="takeFirstSearchresult" v-if="!searchbarCollapsed" id="search" v-model="searchQuery" type="text" class="form-control ui-element search searchbar d-print-none">
-                <ul v-if="!searchbarCollapsed && searchResults !== null " class="list-group d-print-none">
+                <input @keyup.enter="takeFirstSearchresult" v-if="showSearchbar" id="search" v-model="searchQuery" type="text" class="form-control ui-element search searchbar d-print-none">
+                <ul v-if="showSearchbar && searchResults !== null " class="list-group d-print-none">
                     <li v-for="entry of searchResults" :key="entry.name" class="list-group-item">
                         <a href="#" @click.prevent="moveToSearchResult(entry)">{{entry.name}}</a>
                     </li>
@@ -19,7 +19,7 @@
             </div>
         </div>
         <div v-if="routeName == 'mainview' && Object.keys(currentProfile).length" class="splitbutton">
-            <i @click="splitScreen" class="ui-element splitscreen fa fa-window-restore shadow"></i>
+            <i @click="$store.commit('application/showSplitscreen', !showSplitscreen)" class="ui-element splitscreen fa fa-window-restore shadow"></i>
         </div>
         <div class="">
             <Layers v-if="routeName == 'mainview'"></Layers>
@@ -132,7 +132,6 @@
   },
   data() {
     return {
-      searchbarCollapsed: true,
       searchQuery: "",
       searchQueryIsDirty: false,
       searchResults: null,
@@ -140,6 +139,7 @@
     };
   },
   computed: {
+    ...mapState("application", ["showSidebar", "showSplitscreen", "showSearchbar"]),
     ...mapState("map", ["openLayersMap"]),
     ...mapState("fairwayprofile", ["currentProfile"]),
     searchIndicator: function() {
@@ -155,8 +155,8 @@
       return {
         "input-group": true,
         searchcontainer: true,
-        "searchbar-collapsed": this.searchbarCollapsed,
-        "searchbar-expanded": !this.searchbarCollapsed
+        "searchbar-collapsed": !this.showSearchbar,
+        "searchbar-expanded": this.showSearchbar
       };
     }
   },
@@ -235,17 +235,10 @@
       this.toggleSearchbar();
     },
     toggleSearchbar() {
-      if (this.searchbarCollapsed) {
+      if (!this.showSearchbar) {
         setTimeout(setFocus, 300);
       }
-      this.searchbarCollapsed = !this.searchbarCollapsed;
-    },
-    toggleSidebar() {
-      this.$store.commit("application/toggleSidebar");
-    },
-    splitScreen() {
-      if (Object.keys(this.currentProfile).length == 0) return;
-      this.$store.commit("application/toggleSplitScreen");
+      this.$store.commit("application/showSearchbar", !this.showSearchbar)
     }
   }
 };
diff -r a4c74a95c177 -r d9e6a1f6f394 client/src/application/Userbar.vue
--- a/client/src/application/Userbar.vue	Tue Nov 06 11:21:29 2018 +0100
+++ b/client/src/application/Userbar.vue	Tue Nov 06 13:00:17 2018 +0100
@@ -1,9 +1,9 @@
 <template>
     <div>
-        <img @click="extendUserMenu" class="ui-element userpic shadow" src="../application/assets/user.png">
+        <img @click="$store.commit('application/showUsermenu', !showUsermenu)" class="ui-element userpic shadow" src="../application/assets/user.png">
         <div :class="userManagementStyle">
-            <span v-if="!isUsermenuCollapsed" class="username align-self-center">{{ user }}</span>
-            <span v-if="!isUsermenuCollapsed" class="logout align-self-center" @click="logoff">
+            <span v-if="showUsermenu" class="username align-self-center">{{ user }}</span>
+            <span v-if="showUsermenu" class="logout align-self-center" @click="logoff">
                 <i class="fa fa-power-off"></i>
             </span>
         </div>
@@ -66,20 +66,17 @@
     return {};
   },
   methods: {
-    extendUserMenu() {
-      this.$store.commit("application/toggleUserMenu");
-    },
     logoff() {
       this.$store.commit("user/clearAuth");
-      this.$store.commit("application/resetSidebar");
-      this.$store.commit("application/resetUserMenu");
-      this.$store.commit("application/resetSplitScreen");
+      this.$store.commit("application/showSidebar", false);
+      this.$store.commit("application/showUsermenu", false);
+      this.$store.commit("application/showSplitscreen", false);
       this.$router.push("/login");
     }
   },
   computed: {
     ...mapState("user", ["user"]),
-    ...mapGetters("application", ["isUsermenuCollapsed"]),
+    ...mapState("application", ["showUsermenu"]),
     userManagementStyle() {
       return {
         "ui-element": true,
@@ -87,8 +84,8 @@
         "flex-row": true,
         "justify-content-around": true,
         usermanagement: true,
-        usermanagementcollapsed: this.isUsermenuCollapsed,
-        usermanagementexpanded: !this.isUsermenuCollapsed,
+        usermanagementcollapsed: !this.showUsermenu,
+        usermanagementexpanded: this.showUsermenu,
         shadow: true
       };
     }
diff -r a4c74a95c177 -r d9e6a1f6f394 client/src/bottlenecks/Bottlenecks.vue
--- a/client/src/bottlenecks/Bottlenecks.vue	Tue Nov 06 11:21:29 2018 +0100
+++ b/client/src/bottlenecks/Bottlenecks.vue	Tue Nov 06 13:00:17 2018 +0100
@@ -1,6 +1,6 @@
 <template>
-    <div :class="bottlenecksStyle" :style="'left: ' + (sidebarCollapsed ? '64px' : '17rem')">
-        <div @click="$store.commit('application/toggleBottlenecks');" class="ui-element close-bottlenecks">
+    <div :class="bottlenecksStyle" :style="'left: ' + (showSidebar ? '17rem' : '64px')">
+        <div @click="$store.commit('application/showBottlenecks', !showBottlenecks);" class="ui-element close-bottlenecks">
             <i class="fa fa-close"></i>
         </div>
 
@@ -82,17 +82,16 @@
     };
   },
   computed: {
-    ...mapState("application", ["bottlenecksCollapsed"]),
+    ...mapState("application", ["showBottlenecks", "showSidebar"]),
     ...mapState("bottlenecks", ["bottlenecks"]),
     ...mapState("map", ["openLayersMap"]),
-    ...mapGetters("application", ["sidebarCollapsed"]),
     bottlenecksStyle() {
       return {
         "ui-element": true,
         bottlenecks: true,
         overlay: true,
-        bottleneckscollapsed: this.bottlenecksCollapsed,
-        bottlenecksextended: !this.bottlenecksCollapsed,
+        bottleneckscollapsed: !this.showBottlenecks,
+        bottlenecksextended: this.showBottlenecks,
         shadow: true
       };
     },
diff -r a4c74a95c177 -r d9e6a1f6f394 client/src/identify/Identify.vue
--- a/client/src/identify/Identify.vue	Tue Nov 06 11:21:29 2018 +0100
+++ b/client/src/identify/Identify.vue	Tue Nov 06 13:00:17 2018 +0100
@@ -1,12 +1,12 @@
 <template>
     <div class="identifymenu">
-        <div @click="collapse" class="d-flex flex-column ui-element minimizer">
+        <div @click="$store.commit('application/showIdentify', !showIdentify)" class="d-flex flex-column ui-element minimizer">
             <div :class="infoStyle">
                 <i class="fa fa-info"></i>
             </div>
         </div>
         <div :class="identifyStyle">
-            <div v-if="!collapsed" class="card-body">
+            <div v-if="showIdentify" class="card-body">
                 <div class="headline">
                     <h4 class="card-title">Identified</h4>
                 </div>
@@ -97,18 +97,13 @@
  *   Thomas Junk <thomas.junk@intevation.de>
  *   Bernhard E. Reiter <bernhard.reiter@intevation.de>
  */
-import { mapState } from "vuex";
-import { mapGetters } from "vuex";
+import { mapState, mapGetters } from "vuex";
 
 export default {
   name: "identify",
-  data() {
-    return {
-      collapsed: true
-    };
-  },
   computed: {
     ...mapGetters("application", ["versionStr"]),
+    ...mapState("application", ["showIdentify"]),
     ...mapState("map", ["identifiedFeatures", "currentMeasurement"]),
     identifyStyle() {
       return {
@@ -116,8 +111,8 @@
         card: true,
         identify: true,
         shadow: true,
-        identifyexpanded: !this.collapsed,
-        identifycollapsed: this.collapsed
+        identifyexpanded: this.showIdentify,
+        identifycollapsed: !this.showIdentify
       };
     },
     infoStyle() {
@@ -129,9 +124,6 @@
     }
   },
   methods: {
-    collapse() {
-      this.collapsed = !this.collapsed;
-    },
     prepareProperties(feature) {
       // return dict object with propertyname:plainvalue prepared for display
       var properties = feature.getProperties();
diff -r a4c74a95c177 -r d9e6a1f6f394 client/src/layers/Layers.vue
--- a/client/src/layers/Layers.vue	Tue Nov 06 11:21:29 2018 +0100
+++ b/client/src/layers/Layers.vue	Tue Nov 06 13:00:17 2018 +0100
@@ -1,12 +1,12 @@
 <template>
     <div class="layerselectmenu">
-        <div @click="collapse" class="d-flex flex-column ui-element minimizer">
+        <div @click="$store.commit('application/showLayers', !showLayers)" class="d-flex flex-column ui-element minimizer">
             <div>
                 <i class="fa fa-th-list"></i>
             </div>
         </div>
         <div :class="layerSelectStyle">
-            <div v-if="!collapsed" class="card-body layers">
+            <div v-if="showLayers" class="card-body layers">
                 <div class="headline">
                     <h4 class="card-title">Layers</h4>
                 </div>
@@ -68,34 +68,27 @@
  * Thomas Junk <thomas.junk@intevation.de>
  */
 import Layerselect from "./Layerselect";
-import { mapGetters } from "vuex";
+import { mapGetters, mapState } from "vuex";
 export default {
   name: "layers",
-  data() {
-    return {
-      collapsed: false
-    };
-  },
   components: {
     Layerselect
   },
   computed: {
     ...mapGetters("map", ["layersForLegend"]),
+    ...mapState("application", ["showLayers"]),
     layerSelectStyle() {
       return {
         "ui-element": true,
         card: true,
         layerselection: true,
         shadow: true,
-        layerselectionexpanded: !this.collapsed,
-        layerselectioncollapsed: this.collapsed
+        layerselectionexpanded: this.showLayers,
+        layerselectioncollapsed: !this.showLayers
       };
     }
   },
   methods: {
-    collapse() {
-      this.collapsed = !this.collapsed;
-    },
     visibilityToggled(layer) {
       this.$store.commit("map/toggleVisibility", layer);
     }
diff -r a4c74a95c177 -r d9e6a1f6f394 client/src/login/Login.vue
--- a/client/src/login/Login.vue	Tue Nov 06 11:21:29 2018 +0100
+++ b/client/src/login/Login.vue	Tue Nov 06 13:00:17 2018 +0100
@@ -94,7 +94,7 @@
 </style>
 
 <script>
-import { mapGetters } from "vuex";
+import { mapState } from "vuex";
 import { HTTP } from "../application/lib/http.js";
 import { displayError } from "../application/lib/errors.js";
 
@@ -150,7 +150,7 @@
       }
       return result;
     },
-    ...mapGetters("application", ["appTitle", "secondaryLogo"])
+    ...mapState("application", ["appTitle", "secondaryLogo"])
   },
   methods: {
     login() {
diff -r a4c74a95c177 -r d9e6a1f6f394 client/src/logs/logs.vue
--- a/client/src/logs/logs.vue	Tue Nov 06 11:21:29 2018 +0100
+++ b/client/src/logs/logs.vue	Tue Nov 06 13:00:17 2018 +0100
@@ -103,7 +103,7 @@
  * Author(s):
  * Thomas Junk <thomas.junk@intevation.de>
  */
-import { mapGetters } from "vuex";
+import { mapState } from "vuex";
 import { HTTP } from "../application/lib/http.js";
 import "../../node_modules/highlight.js/styles/paraiso-dark.css";
 import Vue from "vue";
@@ -144,7 +144,7 @@
     }
   },
   computed: {
-    ...mapGetters("application", ["sidebarCollapsed", "isUsermenuCollapsed"]),
+    ...mapState("application", ["showSidebar"]),
     accesslogStyle() {
       return {
         active: this.currentLog == ACCESSLOG,
@@ -160,8 +160,8 @@
     spacer() {
       return {
         spacer: true,
-        "spacer-expanded": !this.sidebarCollapsed,
-        "spacer-collapsed": this.sidebarCollapsed
+        "spacer-expanded": this.showSidebar,
+        "spacer-collapsed": !this.showSidebar
       };
     }
   }
diff -r a4c74a95c177 -r d9e6a1f6f394 client/src/map/Maplayer.vue
--- a/client/src/map/Maplayer.vue	Tue Nov 06 11:21:29 2018 +0100
+++ b/client/src/map/Maplayer.vue	Tue Nov 06 13:00:17 2018 +0100
@@ -155,7 +155,7 @@
             this.calculateIntersection(vectorSource, profileLine);
           })
           .then(() => {
-            this.$store.commit("application/openSplitScreen");
+            this.$store.commit("application/showSplitscreen", true);
           })
           .catch(error => {
             const { status, data } = error.response;
diff -r a4c74a95c177 -r d9e6a1f6f394 client/src/morphtool/Morphtool.vue
--- a/client/src/morphtool/Morphtool.vue	Tue Nov 06 11:21:29 2018 +0100
+++ b/client/src/morphtool/Morphtool.vue	Tue Nov 06 13:00:17 2018 +0100
@@ -119,7 +119,7 @@
   methods: {
     clearSelection() {
       this.$store.dispatch("bottlenecks/setSelectedBottleneck", null);
-      this.$store.commit("application/closeSplitScreen");
+      this.$store.commit("application/showSplitscreen", false);
       if (this.drawMode) {
         this.$store.commit("map/toggleDrawModeLine");
       }
diff -r a4c74a95c177 -r d9e6a1f6f394 client/src/pdftool/Pdftool.vue
--- a/client/src/pdftool/Pdftool.vue	Tue Nov 06 11:21:29 2018 +0100
+++ b/client/src/pdftool/Pdftool.vue	Tue Nov 06 13:00:17 2018 +0100
@@ -1,10 +1,10 @@
 <template>
     <div class="pdftool">
-        <div @click="collapse" class="d-flex flex-column ui-element minimizer">
-            <i :class="['fa', 'mt-1', {'fa-file-pdf-o': collapsed}, {'fa-close': !collapsed}]"></i>
+        <div @click="$store.commit('application/showPdfTool', !showPdfTool)" class="d-flex flex-column ui-element minimizer">
+            <i :class="['fa', 'mt-1', {'fa-file-pdf-o': !showPdfTool}, {'fa-close': showPdfTool}]"></i>
         </div>
         <div :class="style">
-            <div v-if="!collapsed" class="card-body">
+            <div v-if="showPdfTool" class="card-body">
                 <div class="headline">
                     <h4 class="card-title">Generate PDF</h4>
                 </div>
@@ -102,7 +102,6 @@
   name: "pdftool",
   data() {
     return {
-      collapsed: true,
       form: {
         format: "landscape",
         downloadType: "download"
@@ -110,22 +109,19 @@
     };
   },
   computed: {
-    ...mapState("application", ["showPrintDialog"]),
+    ...mapState("application", ["showPdfTool"]),
     style() {
       return {
         "ui-element": true,
         card: true,
         inner: true,
         shadow: true,
-        pdftoolexpanded: !this.collapsed,
-        pdftoolcollapsed: this.collapsed
+        pdftoolexpanded: this.showPdfTool,
+        pdftoolcollapsed: !this.showPdfTool
       };
     }
   },
   methods: {
-    collapse() {
-      this.collapsed = !this.collapsed;
-    },
     download() {
       // generate PDF and open it
       // TODO: replace this src with an API reponse after actually generating PDFs
diff -r a4c74a95c177 -r d9e6a1f6f394 client/src/store/application.js
--- a/client/src/store/application.js	Tue Nov 06 11:21:29 2018 +0100
+++ b/client/src/store/application.js	Tue Nov 06 13:00:17 2018 +0100
@@ -16,53 +16,23 @@
 
 import { version } from "../../package.json";
 
-const defaultCollapseState = true;
-
-const initializeSplitScreen = () => {
-  return {
-    active: false,
-    mode: "v"
-  };
-};
-
 export default {
   namespaced: true,
   state: {
     appTitle: process.env.VUE_APP_TITLE,
     secondaryLogo: process.env.VUE_APP_SECONDARY_LOGO_URL,
-    sidebar: {
-      iscollapsed: defaultCollapseState
-    },
-    bottlenecksCollapsed: true,
-    splitsceen: initializeSplitScreen(),
-    usermenu: {
-      iscollapsed: defaultCollapseState
-    },
+    showSidebar: false,
+    showUsermenu: false,
+    showBottlenecks: false,
+    showSplitscreen: false,
+    showSearchbar: false,
+    showIdentify: false,
+    showLayers: true,
+    showPdfTool: false,
     countries: ["AT", "SK", "HU", "HR", "RS", "BiH", "BG", "RO", "UA"],
     version
   },
   getters: {
-    countries: state => {
-      return state.countries;
-    },
-    sidebarCollapsed: state => {
-      return state.sidebar.iscollapsed;
-    },
-    isUsermenuCollapsed: state => {
-      return state.usermenu.iscollapsed;
-    },
-    appTitle: state => {
-      return state.appTitle;
-    },
-    secondaryLogo: state => {
-      return state.secondaryLogo;
-    },
-    isSplitscreen: state => {
-      return state.splitsceen.active;
-    },
-    splitMode: state => {
-      return state.splitsceen.mode;
-    },
     versionStr: state => {
       // version number from package.json
       let versionStr = "v" + state.version;
@@ -80,39 +50,29 @@
     }
   },
   mutations: {
-    toggleSidebar: state => {
-      state.sidebar.iscollapsed = !state.sidebar.iscollapsed;
+    showSidebar: (state, show) => {
+      state.showSidebar = show;
     },
-    toggleBottlenecks: state => {
-      state.bottlenecksCollapsed = !state.bottlenecksCollapsed;
-    },
-    toggleUserMenu: state => {
-      state.usermenu.iscollapsed = !state.usermenu.iscollapsed;
+    showBottlenecks: (state, show) => {
+      state.showBottlenecks = show;
     },
-    toggleSplitScreen: state => {
-      state.splitsceen.active = !state.splitsceen.active;
+    showSplitscreen: (state, show) => {
+      state.showSplitscreen = show;
     },
-    openSplitScreen: state => {
-      state.splitsceen.active = true;
-    },
-    closeSplitScreen: state => {
-      state.splitsceen.active = false;
+    showUsermenu: (state, show) => {
+      state.showUsermenu = show;
     },
-    resetSidebar: state => {
-      state.sidebar.iscollapsed = defaultCollapseState;
+    showSearchbar: (state, show) => {
+      state.showSearchbar = show;
     },
-    collapseSidebar: state => {
-      state.sidebar.iscollapsed = true;
-    },
-    resetUserMenu: state => {
-      state.usermenu.iscollapsed = defaultCollapseState;
+    showIdentify: (state, show) => {
+      state.showIdentify = show;
     },
-    collapseUserMenu: state => {
-      state.usermenu.iscollapsed = true;
+    showLayers: (state, show) => {
+      state.showLayers = show;
     },
-    resetSplitScreen: state => {
-      state.splitsceen = initializeSplitScreen();
+    showPdfTool: (state, show) => {
+      state.showPdfTool = show;
     }
-  },
-  actions: {}
+  }
 };
diff -r a4c74a95c177 -r d9e6a1f6f394 client/src/usermanagement/Userdetail.vue
--- a/client/src/usermanagement/Userdetail.vue	Tue Nov 06 11:21:29 2018 +0100
+++ b/client/src/usermanagement/Userdetail.vue	Tue Nov 06 13:00:17 2018 +0100
@@ -107,7 +107,7 @@
  */
 import { HTTP } from "../application/lib/http";
 import { displayError } from "../application/lib/errors.js";
-import { mapGetters } from "vuex";
+import { mapState } from "vuex";
 import PasswordField from "./Passwordfield";
 
 const emptyErrormessages = () => {
@@ -189,7 +189,7 @@
       if (this.currentUser.isNew) return "N.N";
       return "";
     },
-    ...mapGetters("application", ["countries"]),
+    ...mapState("application", ["countries"]),
     user() {
       return this.$store.getters["usermanagement/currentUser"];
     },
diff -r a4c74a95c177 -r d9e6a1f6f394 client/src/usermanagement/Usermanagement.vue
--- a/client/src/usermanagement/Usermanagement.vue	Tue Nov 06 11:21:29 2018 +0100
+++ b/client/src/usermanagement/Usermanagement.vue	Tue Nov 06 13:00:17 2018 +0100
@@ -193,7 +193,7 @@
  */
 import Userdetail from "./Userdetail";
 import store from "../store";
-import { mapGetters } from "vuex";
+import { mapGetters, mapState } from "vuex";
 import { displayError } from "../application/lib/errors.js";
 
 export default {
@@ -210,12 +210,12 @@
   },
   computed: {
     ...mapGetters("usermanagement", ["isUserDetailsVisible"]),
-    ...mapGetters("application", ["sidebarCollapsed", "isUsermenuCollapsed"]),
+    ...mapState("application", ["showSidebar", "showUsermenu"]),
     spacerStyle() {
       return {
         spacer: true,
-        "spacer-expanded": !(this.isUsermenuCollapsed && this.sidebarCollapsed),
-        "spacer-collapsed": this.isUsermenuCollapsed && this.sidebarCollapsed
+        "spacer-expanded": (this.showUsermenu && this.showSidebar),
+        "spacer-collapsed": !this.showUsermenu && this.showSidebar
       };
     },
     users() {