diff options
| -rw-r--r-- | app/assets/javascripts/fly_out_nav.js | 3 | ||||
| -rw-r--r-- | app/assets/stylesheets/new_sidebar.scss | 15 | ||||
| -rw-r--r-- | changelogs/unreleased/fix-sidebar-with-scrollbars.yml | 5 | ||||
| -rw-r--r-- | spec/javascripts/fly_out_nav_spec.js | 9 |
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', () => { |