Commit 9ddc62cc authored by Phil Hughes's avatar Phil Hughes Committed by Annabel Dunstone Gray

Fixed the new sidebars width when browser has scrollbars

parent a70c76df
......@@ -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();
......
......@@ -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;
}
......
---
title: Fixed the sidebar scrollbar overlapping links
merge_request:
author:
type: fixed
......@@ -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', () => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment