diff options
Diffstat (limited to 'app/assets/javascripts/behaviors/collapse_sidebar_on_window_resize.js')
-rw-r--r-- | app/assets/javascripts/behaviors/collapse_sidebar_on_window_resize.js | 41 |
1 files changed, 41 insertions, 0 deletions
diff --git a/app/assets/javascripts/behaviors/collapse_sidebar_on_window_resize.js b/app/assets/javascripts/behaviors/collapse_sidebar_on_window_resize.js new file mode 100644 index 00000000000..d9164f6204a --- /dev/null +++ b/app/assets/javascripts/behaviors/collapse_sidebar_on_window_resize.js @@ -0,0 +1,41 @@ +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 () => { + const $sidebarGutterToggle = $('.js-sidebar-toggle'); + 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 $gutterIcon = $sidebarGutterToggle.find('i'); + if ($gutterIcon.hasClass('fa-angle-double-right')) { + $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) { + const collapseIcon = sidebarGutterVueToggleEl.querySelector('i.fa-angle-double-right'); + + if (collapseIcon) { + collapseIcon.click(); + } + } + } + } + }); +}; |