Fixed issue with sidebar link overlapsidebar-overlap-fix

Closes #17566

6 files changed, 32 insertions, 35 deletions

diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee
index bffce5a0c0f..7ef6568eaa9 100644
--- a/app/assets/javascripts/application.js.coffee
+++ b/app/assets/javascripts/application.js.coffee
@@ -122,7 +122,11 @@ window.onload = ->
 $ ->
   bootstrapBreakpoint = bp.getBreakpointSize()
 
-  $(".nicescroll").niceScroll(cursoropacitymax: '0.4', cursorcolor: '#FFF', cursorborder: "1px solid #FFF")
+  $(".nicescroll .nav-sidebar").niceScroll(
+    cursoropacitymax: '0.4'
+    cursorcolor: '#FFF'
+    cursorborder: "1px solid #FFF"
+  )
 
   # Click a .js-select-on-focus field, select the contents
   $(".js-select-on-focus").on "focusin", ->
diff --git a/app/assets/javascripts/sidebar.js.coffee b/app/assets/javascripts/sidebar.js.coffee
index ea4ac52da31..628f4289af4 100644
--- a/app/assets/javascripts/sidebar.js.coffee
+++ b/app/assets/javascripts/sidebar.js.coffee
@@ -8,9 +8,9 @@ toggleSidebar = ->
   $.cookie("collapsed_nav", $('.page-with-sidebar').hasClass(collapsed), { path: '/' })
 
   setTimeout ( ->
-    niceScrollBars = $('.nicescroll').niceScroll();
+    niceScrollBars = $('.nicescroll .nav-sidebar').niceScroll();
     niceScrollBars.updateScrollBar();
-  ), 300
+  ), 500
 
 $(document).on("click", '.toggle-nav-collapse, .side-nav-toggle', (e) ->
   e.preventDefault()
diff --git a/app/assets/stylesheets/framework/gitlab-theme.scss b/app/assets/stylesheets/framework/gitlab-theme.scss
index f47eb1f233e..e1414cb3af2 100644
--- a/app/assets/stylesheets/framework/gitlab-theme.scss
+++ b/app/assets/stylesheets/framework/gitlab-theme.scss
@@ -29,7 +29,7 @@
       }
     }
 
-    .collapse-nav a {
+    .toggle-nav-collapse {
       color: #fff;
       background: $color;
     }
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index f90d7a806d3..f52af8e9b0e 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -51,10 +51,11 @@
 .sidebar-wrapper {
   .header-logo {
     border-bottom: 1px solid transparent;
-    float: left;
     height: $header-height;
-    width: $sidebar_width;
-    position: fixed;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
     z-index: 999;
     overflow: hidden;
     transition-duration: .3s;
@@ -99,9 +100,10 @@
 
   .sidebar-user {
     padding: 7px 22px;
-    position: fixed;
+    position: absolute;
+    left: 0;
     bottom: 40px;
-    width: $sidebar_width;
+    width: 100%;
     overflow: hidden;
     transition-duration: .3s;
 
@@ -126,6 +128,11 @@
 
 
 .nav-sidebar {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   margin-top: 14 + $header-height;
   margin-bottom: 100px;
   transition-duration: .3s;
@@ -137,14 +144,15 @@
   }
 
   li {
-    width: $sidebar_width;
-
     &.separate-item {
       padding-top: 10px;
       margin-top: 10px;
     }
 
     a {
+      position: relative;
+      display: block;
+      width: 100%;
       padding: 7px 15px;
       font-size: $gl-font-size;
       line-height: 24px;
@@ -154,6 +162,7 @@
       padding-left: 23px;
       font-weight: normal;
       outline: none;
+      white-space: nowrap;
 
       &:hover {
         text-decoration: none;
@@ -170,7 +179,9 @@
       }
 
       .count {
-        float: right;
+        position: absolute;
+        top: 7px;
+        right: 15px;
         background: #eee;
         padding: 0 8px;
         @include border-radius(6px);
@@ -192,9 +203,9 @@
   }
 }
 
-.collapse-nav a {
-  width: $sidebar_width;
-  position: fixed;
+.toggle-nav-collapse {
+  width: 100%;
+  position: absolute;
   bottom: 0;
   left: 0;
   font-size: 13px;
@@ -247,8 +258,6 @@
     }
 
     .nav-sidebar {
-      width: $sidebar_collapsed_width;
-
       li {
         width: auto;
 
@@ -260,14 +269,6 @@
       }
     }
 
-    .collapse-nav a {
-      width: $sidebar_collapsed_width;
-
-      @media (max-width: $screen-xs-min) {
-        width: 0;
-      }
-    }
-
     .sidebar-user {
       padding-left: ($sidebar_collapsed_width - 36) / 2;
       width: $sidebar_collapsed_width;
@@ -307,13 +308,7 @@
   .sidebar-wrapper {
     width: $sidebar_width;
 
-    .nav-sidebar {
-      width: $sidebar_width;
-    }
-
     .nav-sidebar li a {
-      width: $sidebar_width;
-
       &.back-link {
         i {
           opacity: 0;
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index 5be0b546a62..c17b26ea361 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -14,8 +14,7 @@
     - else
       = render 'layouts/nav/explore'
 
-    .collapse-nav
-      = render partial: 'layouts/collapse_button'
+    = render partial: 'layouts/collapse_button'
     - if current_user
       = link_to current_user, class: 'sidebar-user', title: "Profile" do
         = image_tag avatar_icon(current_user, 60), alt: 'Profile', class: 'avatar avatar s36'
diff --git a/app/views/layouts/ci/_page.html.haml b/app/views/layouts/ci/_page.html.haml
index a13241bebee..4dcb0c042d4 100644
--- a/app/views/layouts/ci/_page.html.haml
+++ b/app/views/layouts/ci/_page.html.haml
@@ -12,8 +12,7 @@
       = render "layouts/ci/#{sidebar}"
     - elsif current_user
       = render 'layouts/nav/dashboard'
-    .collapse-nav
-      = render partial: 'layouts/collapse_button'
+    = render partial: 'layouts/collapse_button'
     - if current_user
       = link_to current_user, class: 'sidebar-user', title: "Profile" do
         = image_tag avatar_icon(current_user, 60), alt: 'Profile', class: 'avatar avatar s36'