Merge branch '35156-more-responsive-nav' into 'master'

fix resize bug for title and collapsible nav menus

Closes #35156

See merge request !12904

3 files changed, 31 insertions, 8 deletions

diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 892b3fab1c6..204b42548fe 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -285,13 +285,7 @@ $(function () {
     return $container.remove();
   // Commit show suppressed diff
   });
-  $('.navbar-toggle').on('click', function () {
-    $('.header-content .title, .header-content .navbar-sub-nav').toggle();
-    $('.header-content .header-logo').toggle();
-    $('.header-content .navbar-collapse').toggle();
-    $('.js-navbar-toggle-left, .js-navbar-toggle-right, .title-container').toggle();
-    return $('.navbar-toggle').toggleClass('active');
-  });
+  $('.navbar-toggle').on('click', () => $('.header-content').toggleClass('menu-expanded'));
   // Show/hide comments on diff
   $body.on('click', '.js-toggle-diff-comments', function (e) {
     var $this = $(this);
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 5bd6c095109..2deff38a1bd 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -132,6 +132,22 @@ header {
     }
   }
 
+  &.navbar-gitlab-new {
+    .fa-times {
+      display: none;
+    }
+
+    .menu-expanded {
+      .fa-ellipsis-v {
+        display: none;
+      }
+
+      .fa-times {
+        display: block;
+      }
+    }
+  }
+
   .global-dropdown {
     position: absolute;
     left: -10px;
@@ -171,6 +187,19 @@ header {
     min-height: $header-height;
     padding-left: 30px;
 
+    &.menu-expanded {
+      @media (max-width: $screen-xs-max) {
+        .header-logo,
+        .title-container {
+          display: none;
+        }
+
+        .navbar-collapse {
+          display: block;
+        }
+      }
+    }
+
     .dropdown-menu {
       margin-top: -5px;
     }
diff --git a/app/views/layouts/header/_new.html.haml b/app/views/layouts/header/_new.html.haml
index 433374b4eb3..610f2ac257d 100644
--- a/app/views/layouts/header/_new.html.haml
+++ b/app/views/layouts/header/_new.html.haml
@@ -81,7 +81,7 @@
       %button.navbar-toggle.hidden-sm.hidden-md.hidden-lg{ type: 'button' }
         %span.sr-only Toggle navigation
         = icon('ellipsis-v', class: 'js-navbar-toggle-right')
-        = icon('times', class: 'js-navbar-toggle-left', style: 'display: none;')
+        = icon('times', class: 'js-navbar-toggle-left')
 
 = render 'shared/outdated_browser'