Hides sidebar nav on window resize

Closes #19307

3 files changed, 47 insertions, 0 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 7f144628d61..d1e1b63cf45 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -30,6 +30,7 @@ v 8.12.0 (unreleased)
   - Reduce contributions calendar data payload (ClemMakesApps)
   - Add `web_url` field to issue, merge request, and snippet API objects (Ben Boeckel)
   - Enable pipeline events by default !6278
+  - Hides pinned nav on window resize
   - Move parsing of sidekiq ps into helper !6245 (pascalbetz)
   - Added go to issue boards keyboard shortcut
   - Expose `sha` and `merge_commit_sha` in merge request API (Ben Boeckel)
diff --git a/app/assets/javascripts/sidebar.js.es6 b/app/assets/javascripts/sidebar.js.es6
index 755fac8107b..bb5184ae881 100644
--- a/app/assets/javascripts/sidebar.js.es6
+++ b/app/assets/javascripts/sidebar.js.es6
@@ -38,6 +38,20 @@
         .on('click', pinnedToggleSelector, () => this.togglePinnedState())
         .on('click', 'html, body', (e) => this.handleClickEvent(e))
         .on('page:change', () => this.renderState());
+      $(window)
+        .off('resize.sidebar')
+        .on('resize.sidebar', () => {
+          clearTimeout(this.widnowResizeTimout);
+          this.widnowResizeTimout = setTimeout(() => {
+            if (!this.isPinned) return;
+
+            if (this.isExpanded && window.innerWidth < sidebarBreakpoint) {
+              this.toggleSidebar();
+            } else if (!this.isExpanded && window.innerWidth >= sidebarBreakpoint) {
+              this.toggleSidebar();
+            }
+          }, 250);
+        });
       this.renderState();
     }
 
diff --git a/spec/features/pinned_nav_spec.rb b/spec/features/pinned_nav_spec.rb
new file mode 100644
index 00000000000..4bb93193d1a
--- /dev/null
+++ b/spec/features/pinned_nav_spec.rb
@@ -0,0 +1,32 @@
+require 'spec_helper'
+
+feature 'Pinned nav', feature: true, js: true do
+  before do
+    login_as(:admin)
+    show_nav
+  end
+
+  it 'hides pinned nav on resize' do
+    page.driver.resize_window(1000, 768)
+
+    expect(page).not_to have_selector('.page-sidebar-pinned')
+  end
+
+  it 'shows pinned nav after resize' do
+    page.driver.resize_window(1000, 768)
+
+    expect(page).not_to have_selector('.page-sidebar-pinned')
+
+    page.driver.resize_window(1024, 768)
+
+    expect(page).to have_selector('.page-sidebar-pinned')
+  end
+
+  def show_nav
+    find('.side-nav-toggle').click
+    expect(page).to have_selector('.page-sidebar-expanded')
+
+    find('.js-nav-pin').click
+    expect(page).to have_selector('.page-sidebar-pinned')
+  end
+end