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 15210d2da8f977862a3c3aafecad3d8057e426b5..a2c7311fbb18c11f187c2f397c5af9395446e48f 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');
         }