From 74b528e3c02c769922cf5cbde742cdb0eea959d5 Mon Sep 17 00:00:00 2001 From: Paul Gascou-Vaillancourt Date: Wed, 24 Sep 2025 14:19:42 -0400 Subject: [PATCH] Migrate sidebar collapse behavior to CQs Migrates the `collapse_sidebar_on_window_resize` behavior to leverage `PanelBreakpointInstance` so that we react to the container size rather than the window, when the container is available. --- .../collapse_sidebar_on_window_resize.js | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 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 index 15210d2da8f977..a2c7311fbb18c1 100644 --- a/app/assets/javascripts/behaviors/collapse_sidebar_on_window_resize.js +++ b/app/assets/javascripts/behaviors/collapse_sidebar_on_window_resize.js @@ -1,5 +1,5 @@ -import { GlBreakpointInstance } from '@gitlab/ui/src/utils'; import $ from 'jquery'; +import { PanelBreakpointInstance } from '~/panel_breakpoint_instance'; /** * This behavior collapses the right sidebar @@ -8,23 +8,22 @@ import $ from 'jquery'; * @sentrify */ export default () => { - let bootstrapBreakpoint = GlBreakpointInstance.getBreakpointSize(); + let currentBreakpoint = PanelBreakpointInstance.getBreakpointSize(); - $(window).on('resize.app', () => { - const oldBootstrapBreakpoint = bootstrapBreakpoint; - bootstrapBreakpoint = GlBreakpointInstance.getBreakpointSize(); + PanelBreakpointInstance.addResizeListener(() => { + const previousBreakpoint = currentBreakpoint; + currentBreakpoint = PanelBreakpointInstance.getBreakpointSize(); - if (bootstrapBreakpoint !== oldBootstrapBreakpoint) { + if (currentBreakpoint !== previousBreakpoint) { const breakpointSizes = ['md', 'sm', 'xs']; - if (breakpointSizes.includes(bootstrapBreakpoint)) { + if (breakpointSizes.includes(currentBreakpoint)) { 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'); } -- GitLab