All files / app/assets/javascripts/behaviors collapse_sidebar_on_window_resize.js

0% Statements 0/17
0% Branches 0/12
0% Functions 0/2
0% Lines 0/17

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47                                                                                             
import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
import $ from 'jquery';
 
/**
 * This behavior collapses the right sidebar
 * if the window size changes
 *
 * @sentrify
 */
export default () => {
  let bootstrapBreakpoint = bp.getBreakpointSize();
 
  $(window).on('resize.app', () => {
    const oldBootstrapBreakpoint = bootstrapBreakpoint;
    bootstrapBreakpoint = bp.getBreakpointSize();
 
    if (bootstrapBreakpoint !== oldBootstrapBreakpoint) {
      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 (isExpanded) {
          const $sidebarGutterToggle = $expandIcon.closest('.js-sidebar-toggle');
 
          $sidebarGutterToggle.trigger('click');
        }
 
        const sidebarGutterVueToggleEl = document.querySelector('.js-sidebar-vue-toggle');
 
        // Sidebar has an icon which corresponds to collapsing the sidebar
        // only then trigger the click.
        if (
          sidebarGutterVueToggleEl &&
          !sidebarGutterVueToggleEl.classList.contains('js-sidebar-collapsed')
        ) {
          if (sidebarGutterVueToggleEl) {
            sidebarGutterVueToggleEl.click();
          }
        }
      }
    }
  });
};