1 files changed, 11 insertions, 6 deletions
diff --git a/app/assets/javascripts/new_sidebar.js b/app/assets/javascripts/new_sidebar.js
index 930218dd1f5..709a5d33b9f 100644
--- a/app/assets/javascripts/new_sidebar.js
+++ b/app/assets/javascripts/new_sidebar.js
@@ -1,7 +1,6 @@
 import Cookies from 'js-cookie';
 import _ from 'underscore';
-/* global bp */
-import './breakpoints';
+import bp from './breakpoints';
 
 export default class NewNavSidebar {
   constructor() {
@@ -16,6 +15,7 @@ export default class NewNavSidebar {
     this.$openSidebar = $('.toggle-mobile-nav');
     this.$closeSidebar = $('.close-nav-button');
     this.$sidebarToggle = $('.js-toggle-sidebar');
+    this.$topLevelLinks = $('.sidebar-top-level-items > li > a');
   }
 
   bindEvents() {
@@ -44,12 +44,17 @@ export default class NewNavSidebar {
   }
 
   toggleCollapsedSidebar(collapsed) {
-    this.$sidebar.toggleClass('sidebar-icons-only', collapsed);
+    const breakpoint = bp.getBreakpointSize();
+
     if (this.$sidebar.length) {
-      this.$page.toggleClass('page-with-new-sidebar', !collapsed);
-      this.$page.toggleClass('page-with-icon-sidebar', collapsed);
+      this.$sidebar.toggleClass('sidebar-icons-only', collapsed);
+      this.$page.toggleClass('page-with-icon-sidebar', breakpoint === 'sm' ? true : collapsed);
     }
     NewNavSidebar.setCollapsedCookie(collapsed);
+
+    this.$topLevelLinks.attr('title', function updateTopLevelTitle() {
+      return collapsed ? this.getAttribute('aria-label') : '';
+    });
   }
 
   render() {
@@ -58,7 +63,7 @@ export default class NewNavSidebar {
     if (breakpoint === 'sm' || breakpoint === 'md') {
       this.toggleCollapsedSidebar(true);
     } else if (breakpoint === 'lg') {
-      const collapse = Cookies.get('sidebar_collapsed') === 'true';
+      const collapse = this.$sidebar.hasClass('sidebar-icons-only');
       this.toggleCollapsedSidebar(collapse);
     }
   }