# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1536668083 -7200
# Node ID 47f11401d9990be7a58ed5b0b029cc3111f657bb
# Parent  b17a4482d07d7cb2cd621892a15ca850b414a07c
feat: Usermenu is now collapsible

diff -r b17a4482d07d -r 47f11401d999 client/src/application/User.vue
--- a/client/src/application/User.vue	Tue Sep 11 13:41:16 2018 +0200
+++ b/client/src/application/User.vue	Tue Sep 11 14:14:43 2018 +0200
@@ -1,8 +1,8 @@
 <template>
-    <div class="ui-element d-flex flex-row justify-content-around usermanagement shadow">
-        <img class="userpic" src="../application/assets/user.png">
-        <span class="username align-self-center">{{ userinfo }}</span>
-        <span class="logout align-self-center" @click="logoff">
+    <div :class="userManagementStyle">
+        <img @click="extendUserMenu" class="userpic" src="../application/assets/user.png">
+        <span v-if="!isUsermenuCollapsed" class="username align-self-center">{{ userinfo }}</span>
+        <span v-if="!isUsermenuCollapsed" class="logout align-self-center" @click="logoff">
             <i class="fa fa-power-off"></i>
         </span>
     </div>
@@ -12,10 +12,17 @@
 .usermanagement {
   background: white;
   margin-left: 1rem;
-  width: 150px;
   padding: 0.25rem;
   border-radius: 5px;
 }
+
+.usermanagementcollapsed {
+  width: 50px;
+}
+
+.usermanagementexpanded {
+  width: 150px;
+}
 </style>
 
 <script>
@@ -26,14 +33,31 @@
     return {};
   },
   methods: {
+    extendUserMenu() {
+      this.$store.commit("application/toggleUserMenu");
+    },
     logoff() {
       this.$store.commit("user/clear_auth");
       this.$store.commit("application/resetSidebar");
+      this.$store.commit("application/resetUserMenu");
       this.$router.push("/login");
     }
   },
   computed: {
-    ...mapGetters("user", ["userinfo"])
+    ...mapGetters("user", ["userinfo"]),
+    ...mapGetters("application", ["isUsermenuCollapsed"]),
+    userManagementStyle() {
+      return {
+        "ui-element": true,
+        "d-flex": true,
+        "flex-row": true,
+        "justify-content-around": true,
+        usermanagement: true,
+        usermanagementcollapsed: this.isUsermenuCollapsed,
+        usermanagementexpanded: !this.isUsermenuCollapsed,
+        shadow: true
+      };
+    }
   }
 };
 </script>
diff -r b17a4482d07d -r 47f11401d999 client/src/application/stores/application.js
--- a/client/src/application/stores/application.js	Tue Sep 11 13:41:16 2018 +0200
+++ b/client/src/application/stores/application.js	Tue Sep 11 14:14:43 2018 +0200
@@ -12,6 +12,9 @@
       active: false,
       mode: "v"
     },
+    usermenu: {
+      iscollapsed: defaultCollapseState
+    },
     countries: ["AT", "SK", "HU", "HR", "RS", "BiH", "BG", "RO", "UA"]
   },
   getters: {
@@ -21,6 +24,9 @@
     sidebarCollapsed: state => {
       return state.sidebar.iscollapsed;
     },
+    isUsermenuCollapsed: state => {
+      return state.usermenu.iscollapsed;
+    },
     appTitle: state => {
       return state.appTitle;
     },
@@ -38,6 +44,9 @@
     toggleSidebar: state => {
       state.sidebar.iscollapsed = !state.sidebar.iscollapsed;
     },
+    toggleUserMenu: state => {
+      state.usermenu.iscollapsed = !state.usermenu.iscollapsed;
+    },
     toggleSplitScreen: state => {
       state.splitsceen.active = !state.splitsceen.active;
     },
@@ -46,6 +55,12 @@
     },
     collapseSidebar: state => {
       state.sidebar.iscollapsed = true;
+    },
+    resetUserMenu: state => {
+      state.usermenu.iscollapsed = defaultCollapseState;
+    },
+    collapseUserMenu: state => {
+      state.usermenu.iscollapsed = true;
     }
   },
   actions: {}