Fixed the new sidebars width when browser has scrollbars

4 files changed, 23 insertions, 9 deletions

diff --git a/app/assets/javascripts/fly_out_nav.js b/app/assets/javascripts/fly_out_nav.js
index ad8254167a2..157280d66e3 100644
--- a/app/assets/javascripts/fly_out_nav.js
+++ b/app/assets/javascripts/fly_out_nav.js
@@ -77,10 +77,11 @@ export const hideMenu = (el) => {
 export const moveSubItemsToPosition = (el, subItems) => {
   const boundingRect = el.getBoundingClientRect();
   const top = calculateTop(boundingRect, subItems.offsetHeight);
+  const left = sidebar ? sidebar.offsetWidth : 50;
   const isAbove = top < boundingRect.top;
 
   subItems.classList.add('fly-out-list');
-  subItems.style.transform = `translate3d(0, ${Math.floor(top) - headerHeight}px, 0)`; // eslint-disable-line no-param-reassign
+  subItems.style.transform = `translate3d(${left}px, ${Math.floor(top) - headerHeight}px, 0)`; // eslint-disable-line no-param-reassign
 
   const subItemsRect = subItems.getBoundingClientRect();
 
diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss
index 952002c83d1..8030854e527 100644
--- a/app/assets/stylesheets/new_sidebar.scss
+++ b/app/assets/stylesheets/new_sidebar.scss
@@ -105,7 +105,8 @@ $new-sidebar-collapsed-width: 50px;
   }
 
   &.sidebar-icons-only {
-    width: $new-sidebar-collapsed-width;
+    width: auto;
+    min-width: $new-sidebar-collapsed-width;
 
     .nav-sidebar-inner-scroll {
       overflow-x: hidden;
@@ -124,6 +125,10 @@ $new-sidebar-collapsed-width: 50px;
     .fly-out-top-item {
       display: block;
     }
+
+    .avatar-container {
+      margin-right: 0;
+    }
   }
 
   &.nav-sidebar-expanded {
@@ -187,7 +192,7 @@ $new-sidebar-collapsed-width: 50px;
 .nav-sidebar-inner-scroll {
   height: 100%;
   width: 100%;
-  overflow: auto;
+  overflow: scroll;
 }
 
 .with-performance-bar .nav-sidebar {
@@ -248,7 +253,7 @@ $new-sidebar-collapsed-width: 50px;
         @media (min-width: $screen-sm-min) {
           position: fixed;
           top: 0;
-          left: $new-sidebar-width;
+          left: 0;
           min-width: 150px;
           margin-top: -1px;
           padding: 4px 1px;
@@ -386,10 +391,6 @@ $new-sidebar-collapsed-width: 50px;
     }
 
     .sidebar-sub-level-items {
-      @media (min-width: $screen-sm-min) {
-        left: $new-sidebar-collapsed-width;
-      }
-
       &:not(.flyout-list) {
         display: none;
       }
diff --git a/changelogs/unreleased/fix-sidebar-with-scrollbars.yml b/changelogs/unreleased/fix-sidebar-with-scrollbars.yml
new file mode 100644
index 00000000000..e0b3851b97f
--- /dev/null
+++ b/changelogs/unreleased/fix-sidebar-with-scrollbars.yml
@@ -0,0 +1,5 @@
+---
+title: Fixed the sidebar scrollbar overlapping links
+merge_request:
+author:
+type: fixed
diff --git a/spec/javascripts/fly_out_nav_spec.js b/spec/javascripts/fly_out_nav_spec.js
index f8b37c0edde..f4b4d7980a4 100644
--- a/spec/javascripts/fly_out_nav_spec.js
+++ b/spec/javascripts/fly_out_nav_spec.js
@@ -271,12 +271,19 @@ describe('Fly out sidebar navigation', () => {
     });
 
     it('sets transform of sub-items', () => {
+      const sidebar = document.createElement('div');
       const subItems = el.querySelector('.sidebar-sub-level-items');
+
+      sidebar.style.width = '200px';
+
+      document.body.appendChild(sidebar);
+
+      setSidebar(sidebar);
       showSubLevelItems(el);
 
       expect(
         subItems.style.transform,
-      ).toBe(`translate3d(0px, ${Math.floor(el.getBoundingClientRect().top) - getHeaderHeight()}px, 0px)`);
+      ).toBe(`translate3d(200px, ${Math.floor(el.getBoundingClientRect().top) - getHeaderHeight()}px, 0px)`);
     });
 
     it('sets is-above when element is above', () => {