Hide sidebar completely when collapsed

app/assets/javascripts/sidebar.js.coffee

@@ -4,7 +4,6 @@ expanded = 'page-sidebar-expanded'
 toggleSidebar = ->
   $('.page-with-sidebar').toggleClass("#{collapsed} #{expanded}")
   $('header').toggleClass("header-collapsed header-expanded")
-  $('.toggle-nav-collapse i').toggleClass("fa-angle-right fa-angle-left")
   $.cookie("collapsed_nav", $('.page-with-sidebar').hasClass(collapsed), { path: '/' })
 
   setTimeout ( ->

app/assets/stylesheets/framework/header.scss

@@ -123,11 +123,11 @@ header {
 }
 
 @mixin collapsed-header {
-  margin-left: $sidebar_collapsed_width;
+  margin-left: 40px;
 }
 
 .header-collapsed {
-  margin-left: $sidebar_collapsed_width;
+  margin-left: 40px;
 
   @media (min-width: $screen-md-min) {
     @include collapsed-header;

app/assets/stylesheets/framework/sidebar.scss

@@ -191,6 +191,27 @@
   }
 }
 
+.expand-nav a {
+  color: $gl-icon-color;
+  width: 60px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  font-size: 20px;
+  background: transparent;
+  height: 59px;
+  text-align: center;
+  line-height: 59px;
+  border-bottom: 1px solid #eee;
+  transition-duration: .3s;
+  outline: none;
+  z-index: 100;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
 .collapse-nav a {
   width: $sidebar_width;
   position: fixed;
@@ -210,55 +231,12 @@
 }
 
 .page-sidebar-collapsed {
-  padding-left: $sidebar_collapsed_width;
-
   .sidebar-wrapper {
-    width: $sidebar_collapsed_width;
-
-    .header-logo {
-      width: $sidebar_collapsed_width;
-
-      a {
-        padding-left: ($sidebar_collapsed_width - 36) / 2;
-
-        .gitlab-text-container {
-          display: none;
-        }
-      }
-    }
-
-    .nav-sidebar {
-      width: $sidebar_collapsed_width;
-
-      li {
-        width: auto;
-
-        a {
-          span {
-            display: none;
-          }
-        }
-      }
-    }
-
-    .collapse-nav a {
-      width: $sidebar_collapsed_width;
-    }
-
-    .sidebar-user {
-      padding-left: ($sidebar_collapsed_width - 36) / 2;
-      width: $sidebar_collapsed_width;
-
-      .username {
-        display: none;
-      }
-    }
+    display: none;
   }
 }
 
 .page-sidebar-expanded {
-  padding-left: $sidebar_collapsed_width;
-
   @media (min-width: $screen-md-min) {
     padding-left: $sidebar_width;
   }

app/views/layouts/_collapse_button.html.haml

-- if nav_menu_collapsed?
-  = link_to icon('angle-right'), '#', class: 'toggle-nav-collapse', title: "Open/Close"
-- else
-  = link_to icon('angle-left'), '#', class: 'toggle-nav-collapse', title: "Open/Close"

app/views/layouts/_page.html.haml

 .page-with-sidebar{ class: "#{page_sidebar_class} #{page_gutter_class}" }
   = render "layouts/broadcast"
+  .expand-nav
+    = link_to icon('bars'), '#', class: 'toggle-nav-collapse', title: "Open/Close"
   .sidebar-wrapper.nicescroll{ class: nav_sidebar_class }
     .header-logo
       %a#logo
@@ -20,7 +22,7 @@
       = render "layouts/nav/#{primary_sidebar}"
 
     .collapse-nav
-      = render partial: 'layouts/collapse_button'
+      = link_to icon('angle-left'), '#', class: 'toggle-nav-collapse', title: "Open/Close"
     - if current_user
       = link_to current_user, class: 'sidebar-user', title: "Profile" do
         = image_tag avatar_icon(current_user, 60), alt: 'Profile', class: 'avatar avatar s36'