Have sidebar labels disappear behind content instead of hide immediately.sidebar-animation

2 files changed, 37 insertions, 44 deletions

diff --git a/app/assets/stylesheets/generic/header.scss b/app/assets/stylesheets/generic/header.scss
index 8faae893a51..31e2ad86691 100644
--- a/app/assets/stylesheets/generic/header.scss
+++ b/app/assets/stylesheets/generic/header.scss
@@ -69,6 +69,7 @@ header {
     float: left;
     height: $header-height;
     width: $sidebar_width;
+    overflow: hidden;
     transition-duration: .3s;
 
     a {
@@ -169,10 +170,6 @@ header {
 @mixin collapsed-header {
   .header-logo {
     width: $sidebar_collapsed_width;
-
-    h3 {
-      display: none;
-    }
   }
 
   .header-content {
diff --git a/app/assets/stylesheets/generic/sidebar.scss b/app/assets/stylesheets/generic/sidebar.scss
index f9abceb7f3e..00e0534b81e 100644
--- a/app/assets/stylesheets/generic/sidebar.scss
+++ b/app/assets/stylesheets/generic/sidebar.scss
@@ -29,42 +29,44 @@
   &.navbar-collapse {
     padding: 0px !important;
   }
-}
-
-.nav-sidebar li a .count {
-  float: right;
-  background: #eee;
-  padding: 0px 8px;
-  @include border-radius(6px);
-}
 
-.nav-sidebar li {
-  &.separate-item {
-    padding-top: 10px;
-    margin-top: 10px;
-  }
-
-  a {
-    color: $gray;
-    display: block;
-    text-decoration: none;
-    padding: 8px 15px;
-    font-size: 14px;
-    line-height: 20px;
-    padding-left: 16px;
+  li {
+    width: $sidebar_width;
 
-    &:hover {
-      text-decoration: none;
+    &.separate-item {
+      padding-top: 10px;
+      margin-top: 10px;
     }
 
-    &:active, &:focus {
+    a {
+      color: $gray;
+      display: block;
       text-decoration: none;
-    }
+      padding: 8px 15px;
+      font-size: 14px;
+      line-height: 20px;
+      padding-left: 16px;
+
+      &:hover {
+        text-decoration: none;
+      }
 
-    i {
-      width: 20px;
-      color: $gray-light;
-      margin-right: 23px;
+      &:active, &:focus {
+        text-decoration: none;
+      }
+
+      i {
+        width: 20px;
+        color: $gray-light;
+        margin-right: 23px;
+      }
+
+      .count {
+        float: right;
+        background: #eee;
+        padding: 0px 8px;
+        @include border-radius(6px);
+      }
     }
   }
 }
@@ -116,11 +118,6 @@
         padding: 8px 15px;
         text-align: left;
         padding-left: 16px;
-
-
-        & > span {
-          display: none;
-        }
       }
     }
 
@@ -130,9 +127,7 @@
     }
 
     .sidebar-user {
-      .username {
-        display: none;
-      }
+      width: $sidebar_collapsed_width;
     }
   }
 }
@@ -182,12 +177,13 @@
 .sidebar-user {
   position: absolute;
   bottom: 0;
-  width: 100%;
+  width: $sidebar_width;
   padding: 10px;
   overflow: hidden;
+  transition-duration: .3s;
 
   .username {
     margin-top: 5px;
-    width: 230px;
+    width: $sidebar_width - 2 * 10px;
   }
 }