Have sidebar labels disappear behind content instead of hide immediately.

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 {

app/assets/stylesheets/generic/sidebar.scss

@@ -29,16 +29,10 @@
   &.navbar-collapse {
     padding: 0px !important;
   }
-}
 
-.nav-sidebar li a .count {
-  float: right;
-  background: #eee;
-  padding: 0px 8px;
-  @include border-radius(6px);
-}
+  li {
+    width: $sidebar_width;
 
-.nav-sidebar li {
     &.separate-item {
       padding-top: 10px;
       margin-top: 10px;
@@ -66,6 +60,14 @@
         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;
   }
 }