# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1530802359 -7200
# Node ID b7ac2e4f9c5cff9101c6b755e707cd3ec6cb0dae
# Parent  0612095050284c3f4160734a47f3235bb254100f
feat: collapsible sidebar

According to UI prototypes collabsible sidebar implemented.

diff -r 061209505028 -r b7ac2e4f9c5c client/src/App.vue
--- a/client/src/App.vue	Wed Jul 04 17:21:10 2018 +0200
+++ b/client/src/App.vue	Thu Jul 05 16:52:39 2018 +0200
@@ -5,7 +5,11 @@
 </template>
 
 <style lang="scss">
+html {
+  height: 100%;
+}
 body {
+  min-height: 100%;
   background-color: #efefef !important;
 }
 
diff -r 061209505028 -r b7ac2e4f9c5c client/src/assets/user.png
Binary file client/src/assets/user.png has changed
diff -r 061209505028 -r b7ac2e4f9c5c client/src/components/Sidebar.vue
--- a/client/src/components/Sidebar.vue	Wed Jul 04 17:21:10 2018 +0200
+++ b/client/src/components/Sidebar.vue	Thu Jul 05 16:52:39 2018 +0200
@@ -1,18 +1,19 @@
 <template>
-  <div class="sidebar">
-    <nav class="nav flex-column">
-      <a class="nav-link active" href="#">Active</a>
+  <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>
       <a class="nav-link" href="#">Link</a>
       <a class="nav-link" href="#">Link</a>
       <a class="nav-link disabled" href="#">Disabled</a>
     </nav>
-    <div class="user d-flex justify-content-center">
+    <div :class="userinfoStyle">
       <div class="userinfo">
-      {{ userinfo }}
-    </div>
-    <div class="logout">
-      <span @click="logoff"><i class="fa fa-power-off"></i></span>
-    </div>
+        <img class="userpic" src="../assets/user.png"><span class="username">{{ userinfo }}</span>
+      </div>
+      <div>
+        <span class="logout" @click="logoff"><i class="fa fa-power-off"></i></span>
+      </div>
     </div>
   </div>
 </template>
@@ -24,14 +25,49 @@
   name: "sidebar",
   computed: {
     ...mapGetters("user", ["userinfo"]),
+    collapseicon() {
+      return {
+        fa: true,
+        "fa-angle-double-left": !this.collapsed,
+        "fa-angle-double-right": this.collapsed
+      };
+    },
+    menuStyle() {
+      return {
+        menu: true,
+        nav: true,
+        "flex-column": true,
+        "visibility-extended": !this.collapsed,
+        "visibility-collapsed": this.collapsed
+      };
+    },
+    userinfoStyle() {
+      return {
+        user:true,
+        "d-inline-flex": true,
+        "visibility-extended": !this.collapsed,
+        "visibility-collapsed": this.collapsed
+      };
+    },
+    collapseStyle() {
+      return {
+        collapser: true,
+        collapserextended: !this.collapsed,
+        collapsercollapsed: this.collapsed
+      };
+    },
     sidebarStyle() {
       return {
+        sidebar: true,
         sidebarcollapsed: this.collapsed,
-        sidebarextended: this.collapsed
+        sidebarextended: !this.collapsed
       };
     }
   },
   methods: {
+    collapse() {
+      this.collapsed = !this.collapsed;
+    },
     logoff() {
       this.$store.commit("user/clear_auth");
       this.$router.push("/login");
@@ -48,27 +84,69 @@
 <style lang="scss">
 @import "../assets/application.scss";
 
-$sidebar-full-width: 150px;
+$sidebar-full-width: 210px;
+$collapser-left-offset: 170px;
+$sidebar-collapsed-width: 0px;
+$transition: 0.5s;
+$transition-fast: 0.1s;
+$transition-slow: 2s;
+
+.collapser {
+  position: absolute;
+  top: 0px;
+  z-index: 1000;
+  background-color: #ffffff;
+  font-size: 24px;
+}
+
+.collapserextended {
+  left: $collapser-left-offset;
+  transition: $transition;
+}
+
+.collapsercollapsed {
+  left: 3px;
+  transition: $transition;
+}
 
-$sidebar-collapsed-width: 80px;
+.userpic {
+  position: relative;
+  left: 1px;
+}
 
+.menu {
+  height: 90%;
+}
+.visibility-extended {
+  opacity: 100;
+  transition: $transition-slow;
+}
+.visibility-collapsed {
+  opacity: 0;
+  transition: $transition-fast;
+}
+
+.user {
+  margin-top: auto;
+}
 .sidebar {
+  background-color: #ffffff;
   padding-top: $large-offset;
+  height: 100vh;
 }
 
 .sidebarcollapsed {
   width: $sidebar-collapsed-width;
+  transition: $transition;
 }
 
 .sidebarextended {
   width: $sidebar-full-width;
+  transition: $transition;
 }
 
-.user {
-  position: absolute;
-  left: 0;
-  bottom: $large-offset;
-  width: 90px;
+.username {
+  margin-left: $small-offset;
 }
 
 .userinfo {
@@ -76,6 +154,9 @@
 }
 
 .logout {
+  position: relative;
+  top: 8px;
   margin-left: $small-offset;
+  cursor: pointer;
 }
 </style>