app/assets/javascripts/behaviors/collapse_sidebar_on_window_resize.js


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

import $ from 'jquery';
import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';

/**
 * 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();
          }
        }
      }
    }
  });
};