Merge branch '22851-keep-scroll-location-when-collapsing-sidebar' into 'master'

Fix page scrolling to top on sidebar toggle

## What does this MR do?

Prevents page from scrolling to the top when a user clicks sidebar closing hamburger icon as well as when a user is toggling sidebar pinning.

## Why was this MR needed?

When a user is closing the sidebar or pinning the sidebar the scroll position of the page should not be affected.

## Does this MR meet the acceptance criteria?

- [x] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- Tests
  - [x] All builds are passing
- [x] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?
Closes #22851

See merge request !6627

2 files changed, 8 insertions, 5 deletions

diff --git a/CHANGELOG b/CHANGELOG
index c0c4b980038..a52ac53bae7 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -12,6 +12,7 @@ v 8.13.0 (unreleased)
   - Avoid database queries on Banzai::ReferenceParser::BaseParser for nodes without references
   - Fix permission for setting an issue's due date
   - Expose expires_at field when sharing project on API
+  - Fix issue with page scrolling to top when closing or pinning sidebar (lukehowell)
   - Allow the Koding integration to be configured through the API
   - Added soft wrap button to repository file/blob editor
   - Add word-wrap to issue title on issue and milestone boards (ClemMakesApps)
diff --git a/app/assets/javascripts/sidebar.js.es6 b/app/assets/javascripts/sidebar.js.es6
index 755fac8107b..ead3219bc31 100644
--- a/app/assets/javascripts/sidebar.js.es6
+++ b/app/assets/javascripts/sidebar.js.es6
@@ -34,8 +34,8 @@
         $(pageSelector).hasClass(expandedPageClass)
       );
       $(document)
-        .on('click', sidebarToggleSelector, () => this.toggleSidebar())
-        .on('click', pinnedToggleSelector, () => this.togglePinnedState())
+        .on('click', sidebarToggleSelector, (e) => this.toggleSidebar(e))
+        .on('click', pinnedToggleSelector, (e) => this.togglePinnedState(e))
         .on('click', 'html, body', (e) => this.handleClickEvent(e))
         .on('page:change', () => this.renderState());
       this.renderState();
@@ -47,17 +47,19 @@
         const targetIsToggle = $target.closest(sidebarToggleSelector).length > 0;
         const targetIsSidebar = $target.closest(sidebarWrapperSelector).length > 0;
         if (!targetIsToggle && (!targetIsSidebar || $target.closest('a'))) {
-          this.toggleSidebar();
+          this.toggleSidebar(e);
         }
       }
     }
 
-    toggleSidebar() {
+    toggleSidebar(e) {
+      e.preventDefault();
       this.isExpanded = !this.isExpanded;
       this.renderState();
     }
 
-    togglePinnedState() {
+    togglePinnedState(e) {
+      e.preventDefault();
       this.isPinned = !this.isPinned;
       if (!this.isPinned) {
         this.isExpanded = false;