Merge branch 'sidebar-sidebars-only-when-scroll' into 'master'

Only show the sidebar scroll bars if the user can scroll

Closes #37972

See merge request gitlab-org/gitlab-ce!14335

app/assets/javascripts/new_sidebar.js

@@ -11,6 +11,7 @@ export default class NewNavSidebar {
   initDomElements() {
     this.$page = $('.page-with-sidebar');
     this.$sidebar = $('.nav-sidebar');
+    this.$innerScroll = $('.nav-sidebar-inner-scroll', this.$sidebar);
     this.$overlay = $('.mobile-overlay');
     this.$openSidebar = $('.toggle-mobile-nav');
     this.$closeSidebar = $('.close-nav-button');
@@ -55,6 +56,16 @@ export default class NewNavSidebar {
       this.$page.toggleClass('page-with-icon-sidebar', breakpoint === 'sm' ? true : collapsed);
     }
     NewNavSidebar.setCollapsedCookie(collapsed);
+
+    this.toggleSidebarOverflow();
+  }
+
+  toggleSidebarOverflow() {
+    if (this.$innerScroll.prop('scrollHeight') > this.$innerScroll.prop('offsetHeight')) {
+      this.$innerScroll.css('overflow-y', 'scroll');
+    } else {
+      this.$innerScroll.css('overflow-y', '');
+    }
   }
 
   render() {

app/assets/stylesheets/new_sidebar.scss

@@ -192,7 +192,11 @@ $new-sidebar-collapsed-width: 50px;
 .nav-sidebar-inner-scroll {
   height: 100%;
   width: 100%;
-  overflow: scroll;
+  overflow: auto;
+
+  @media (min-width: $screen-sm-min) {
+    overflow: hidden;
+  }
 }
 
 .with-performance-bar .nav-sidebar {