Merge branch 'mobile-navigation-redesign' into 'master'

Hide navbar on mobile

Part of  #14838    
Closes #17323    

<img src="/uploads/33d2dbc17e94329891108c4e80d4aff3/nav.gif" width="800px">

See merge request !4103

8 files changed, 108 insertions, 9 deletions

diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee
index 5bac8eef1cb..bffce5a0c0f 100644
--- a/app/assets/javascripts/application.js.coffee
+++ b/app/assets/javascripts/application.js.coffee
@@ -204,6 +204,7 @@ $ ->
     $('.header-content .title').toggle()
     $('.header-content .navbar-collapse').toggle()
     $('.navbar-toggle').toggleClass('active')
+    $('.navbar-toggle i').toggleClass("fa-angle-right fa-angle-left")
 
   # Show/hide comments on diff
   $("body").on "click", ".js-toggle-diff-comments", (e) ->
diff --git a/app/assets/javascripts/sidebar.js.coffee b/app/assets/javascripts/sidebar.js.coffee
index 860d4f438d0..ea4ac52da31 100644
--- a/app/assets/javascripts/sidebar.js.coffee
+++ b/app/assets/javascripts/sidebar.js.coffee
@@ -12,7 +12,7 @@ toggleSidebar = ->
     niceScrollBars.updateScrollBar();
   ), 300
 
-$(document).on("click", '.toggle-nav-collapse', (e) ->
+$(document).on("click", '.toggle-nav-collapse, .side-nav-toggle', (e) ->
   e.preventDefault()
 
   toggleSidebar()
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 97f9d582007..51b54ceb4bd 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -8,7 +8,7 @@ header {
   &.navbar-empty {
     height: 58px;
     background: #fff;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid $btn-gray-hover;
 
     .center-logo {
       margin: 11px 0;
@@ -22,7 +22,7 @@ header {
   }
 
   &.navbar-gitlab {
-    padding: 0 20px;
+    padding: 0 16px;
     z-index: 100;
     margin-bottom: 0;
     min-height: $header-height;
@@ -30,6 +30,10 @@ header {
     border: none;
     border-bottom: 1px solid $border-color;
 
+    @media (max-width: $screen-xs-min) {
+      padding: 0 16px;
+    }
+
     &.with-horizontal-nav {
       border-bottom: none;
     }
@@ -60,16 +64,44 @@ header {
         margin: 6px 0;
         border-radius: 0;
         position: absolute;
-        right: 2px;
+        right: -10px;
+        padding: 6px 10px;
 
         &:hover {
-          background-color: #eee;
+          background-color: $btn-gray-hover;
         }
+
         &.active {
           color: $gl-icon-color;
         }
       }
     }
+
+    &.header-collapsed {
+      padding: 0 16px;
+    }
+
+    .side-nav-toggle {
+      display: none;
+      position: absolute;
+      left: -10px;
+      margin: 6px 0;
+      padding: 6px 10px;
+      border: none;
+      background-color: $background-color;
+
+      &:hover {
+        background-color: $btn-gray-hover;
+      }
+
+      &:focus {
+        outline: none;
+      }
+
+      @media (max-width: $screen-xs-min) {
+        display: block;
+      }
+    }
   }
 
   .header-content {
@@ -77,6 +109,10 @@ header {
     height: $header-height;
     padding-right: 40px;
 
+    @media (max-width: $screen-xs-min) {
+      padding-left: 40px;
+    }
+
     @media (min-width: $screen-sm-min) {
       padding-right: 0;
     }
@@ -145,6 +181,10 @@ header {
   @media (min-width: $screen-md-min) {
     @include collapsed-header;
   }
+
+  @media (max-width: $screen-xs-min) {
+    margin-left: 0;
+  }
 }
 
 .header-expanded {
@@ -153,6 +193,10 @@ header {
   @media (min-width: $screen-md-min) {
     margin-left: $sidebar_width;
   }
+
+  @media (max-width: $screen-xs-min) {
+    margin-left: 0;
+  }
 }
 
 @media (max-width: $screen-xs-max) {
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 7c18e93a261..f2d7dc625e0 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -201,9 +201,13 @@
   border-bottom: 1px solid $border-color;
   transition-duration: .3s;
 
+  .container-fluid {
+    position: relative;
+  }
+
   .controls {
     float: right;
-    padding: 7px 5px 0 0;
+    padding: 7px 0 0;
 
     i {
       color: $layout-link-gray;
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index e940fd7286e..593f65aaf63 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -210,15 +210,33 @@
   }
 }
 
+.sidebar-wrapper {
+  &.hidden-nav {
+    width: 0;
+  }
+}
+
 .page-sidebar-collapsed {
   padding-left: $sidebar_collapsed_width;
 
+  @media (max-width: $screen-xs-min) {
+    padding-left: 0;
+  }
+
   .sidebar-wrapper {
     width: $sidebar_collapsed_width;
 
+    @media (max-width: $screen-xs-min) {
+      width: 0;
+    }
+
     .header-logo {
       width: $sidebar_collapsed_width;
 
+      @media (max-width: $screen-xs-min) {
+        width: 0;
+      }
+
       a {
         padding-left: ($sidebar_collapsed_width - 36) / 2;
 
@@ -244,12 +262,22 @@
 
     .collapse-nav a {
       width: $sidebar_collapsed_width;
+
+      @media (max-width: $screen-xs-min) {
+        width: 0;
+      }
     }
 
     .sidebar-user {
       padding-left: ($sidebar_collapsed_width - 36) / 2;
       width: $sidebar_collapsed_width;
 
+      @media (max-width: $screen-xs-min) {
+        width: 0;
+        padding-left: 0;
+        padding-right: 0;
+      }
+
       .username {
         display: none;
       }
@@ -258,6 +286,10 @@
 
   .layout-nav {
     padding-right: $sidebar_collapsed_width;
+
+    @media (max-width: $screen-xs-min) {
+      padding-right: 0;;
+    }
   }
 }
 
@@ -268,6 +300,10 @@
     padding-left: $sidebar_width;
   }
 
+  @media (max-width: $screen-xs-min) {
+    padding-left: 0;
+  }
+
   .sidebar-wrapper {
     width: $sidebar_width;
 
@@ -287,7 +323,17 @@
   }
 
   .layout-nav {
-    padding-right: $sidebar_width;
+    @media (max-width: $screen-xs-min) {
+      padding-right: 0;;
+    }
+
+    @media (min-width: $screen-xs-min) and (max-width: $screen-md-min) {
+      padding-right: 62px;
+    }
+
+    @media (min-width: $screen-md-min) {
+      padding-right: $sidebar_width;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index ccb4e5381b7..84e74db06b0 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -215,6 +215,7 @@ $dropdown-toggle-hover-icon-color: $dropdown-toggle-hover-border-color;
 $btn-active-gray: #ececec;
 $btn-placeholder-gray: #c7c7c7;
 $btn-white-active: #848484;
+$btn-gray-hover: #eee;
 
 /*
  *  Award emoji
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index abc5a0e9877..843379a3f54 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -218,7 +218,7 @@
 
       .btn {
         display: inline-block;
-        width: 48%;
+        width: 46%;
       }
     }
   }
diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml
index 86930d4eaaf..172579dafda 100644
--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -1,9 +1,12 @@
 %header.navbar.navbar-fixed-top.navbar-gitlab{ class: nav_header_class }
   %div{ class: fluid_layout ? "container-fluid" : "container-fluid" }
     .header-content
-      %button.navbar-toggle{type: 'button'}
+      %button.side-nav-toggle{type: 'button'}
         %span.sr-only Toggle navigation
         = icon('bars')
+      %button.navbar-toggle{type: 'button'}
+        %span.sr-only Toggle navigation
+        = icon('angle-left')
 
       .navbar-collapse.collapse
         %ul.nav.navbar-nav