Move state logic from using classes to container

Instead of relying on the toggling of "hidden" class,
we now use `data-is-expanded` on the container class
to check for `isExpanded`. This should make the code
less error-prone and more Vue-like.

app/assets/javascripts/behaviors/collapse_sidebar_on_window_resize.js

@@ -18,8 +18,11 @@ export default () => {
       const breakpointSizes = ['md', 'sm', 'xs'];
 
       if (breakpointSizes.includes(bootstrapBreakpoint)) {
+        const $toggleContainer = $('.js-sidebar-toggle-container');
+        const isExpanded = $toggleContainer.data('is-expanded');
         const $expandIcon = $('.js-sidebar-expand');
-        if ($expandIcon.hasClass('hidden')) {
+
+        if (isExpanded) {
           const $sidebarGutterToggle = $expandIcon.closest('.js-sidebar-toggle');
 
           $sidebarGutterToggle.trigger('click');

app/assets/javascripts/right_sidebar.js

@@ -44,11 +44,13 @@ Sidebar.prototype.sidebarToggleClicked = function(e, triggered) {
   const $this = $(this);
   const $collapseIcon = $('.js-sidebar-collapse');
   const $expandIcon = $('.js-sidebar-expand');
-  const isExpanded = $expandIcon.hasClass('hidden');
+  const $toggleContainer = $('.js-sidebar-toggle-container');
+  const isExpanded = $toggleContainer.data('is-expanded');
   const tooltipLabel = isExpanded ? __('Expand sidebar') : __('Collapse sidebar');
   e.preventDefault();
 
   if (isExpanded) {
+    $toggleContainer.data('is-expanded', false);
     $collapseIcon.addClass('hidden');
     $expandIcon.removeClass('hidden');
     $('aside.right-sidebar')
@@ -58,6 +60,7 @@ Sidebar.prototype.sidebarToggleClicked = function(e, triggered) {
       .removeClass('right-sidebar-expanded')
       .addClass('right-sidebar-collapsed');
   } else {
+    $toggleContainer.data('is-expanded', true);
     $expandIcon.addClass('hidden');
     $collapseIcon.removeClass('hidden');
     $('aside.right-sidebar')

app/helpers/issuables_helper.rb

@@ -4,7 +4,7 @@ module IssuablesHelper
   include GitlabRoutingHelper
 
   def sidebar_gutter_toggle_icon
-    content_tag(:span) do
+    content_tag(:span, class: 'js-sidebar-toggle-container', data: { is_expanded: !sidebar_gutter_collapsed? }) do
       sprite_icon('chevron-double-lg-left', css_class: "js-sidebar-expand #{'hidden' unless sidebar_gutter_collapsed?}") +
       sprite_icon('chevron-double-lg-right', css_class: "js-sidebar-collapse #{'hidden' if sidebar_gutter_collapsed?}")
     end

spec/frontend/right_sidebar_spec.js

@@ -6,6 +6,7 @@ import Sidebar from '~/right_sidebar';
 
 let $aside = null;
 let $toggle = null;
+let $toggleContainer = null;
 let $expandIcon = null;
 let $collapseIcon = null;
 let $page = null;
@@ -16,6 +17,7 @@ const assertSidebarState = state => {
   const shouldBeCollapsed = state === 'collapsed';
   expect($aside.hasClass('right-sidebar-expanded')).toBe(shouldBeExpanded);
   expect($page.hasClass('right-sidebar-expanded')).toBe(shouldBeExpanded);
+  expect($toggleContainer.data('is-expanded')).toBe(shouldBeExpanded);
   expect($expandIcon.hasClass('hidden')).toBe(shouldBeExpanded);
   expect($aside.hasClass('right-sidebar-collapsed')).toBe(shouldBeCollapsed);
   expect($page.hasClass('right-sidebar-collapsed')).toBe(shouldBeCollapsed);
@@ -34,6 +36,7 @@ describe('RightSidebar', () => {
       new Sidebar(); // eslint-disable-line no-new
       $aside = $('.right-sidebar');
       $page = $('.layout-page');
+      $toggleContainer = $('.js-sidebar-toggle-container');
       $expandIcon = $aside.find('.js-sidebar-expand');
       $collapseIcon = $aside.find('.js-sidebar-collapse');
       $toggle = $aside.find('.js-sidebar-toggle');