Fix flyout nav on small viewportsce-quick-fix-58727-collapsed-sidebar-flyout-menu-items-don-t-appear-in-1200px-screen-size

Decouples sidebar collapsed style from
behavior.

4 files changed, 13 insertions, 3 deletions

diff --git a/app/assets/javascripts/contextual_sidebar.js b/app/assets/javascripts/contextual_sidebar.js
index 03dea1ec0a5..b62ec8a651b 100644
--- a/app/assets/javascripts/contextual_sidebar.js
+++ b/app/assets/javascripts/contextual_sidebar.js
@@ -8,6 +8,8 @@ import { parseBoolean } from '~/lib/utils/common_utils';
 // https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/24555#note_134136110
 const NAV_SIDEBAR_BREAKPOINT = 1200;
 
+export const SIDEBAR_COLLAPSED_CLASS = 'js-sidebar-collapsed';
+
 export default class ContextualSidebar {
   constructor() {
     this.initDomElements();
@@ -62,6 +64,7 @@ export default class ContextualSidebar {
     const breakpoint = bp.getBreakpointSize();
     const dbp = ContextualSidebar.isDesktopBreakpoint();
 
+    this.$sidebar.toggleClass(SIDEBAR_COLLAPSED_CLASS, !show);
     this.$sidebar.toggleClass('sidebar-expanded-mobile', !dbp ? show : false);
     this.$overlay.toggleClass(
       'mobile-nav-open',
diff --git a/app/assets/javascripts/fly_out_nav.js b/app/assets/javascripts/fly_out_nav.js
index 2b6af9060d1..2566ed6b47c 100644
--- a/app/assets/javascripts/fly_out_nav.js
+++ b/app/assets/javascripts/fly_out_nav.js
@@ -1,4 +1,5 @@
 import bp from './breakpoints';
+import { SIDEBAR_COLLAPSED_CLASS } from './contextual_sidebar';
 
 const HIDE_INTERVAL_TIMEOUT = 300;
 const IS_OVER_CLASS = 'is-over';
@@ -29,7 +30,7 @@ const setHeaderHeight = () => {
 };
 
 export const isSidebarCollapsed = () =>
-  sidebar && sidebar.classList.contains('sidebar-collapsed-desktop');
+  sidebar && sidebar.classList.contains(SIDEBAR_COLLAPSED_CLASS);
 
 export const canShowActiveSubItems = el => {
   if (el.classList.contains('active') && !isSidebarCollapsed()) {
diff --git a/changelogs/unreleased/ce-quick-fix-58727-collapsed-sidebar-flyout-menu-items-don-t-appear-in-1200px-screen-size.yml b/changelogs/unreleased/ce-quick-fix-58727-collapsed-sidebar-flyout-menu-items-don-t-appear-in-1200px-screen-size.yml
new file mode 100644
index 00000000000..332105bb269
--- /dev/null
+++ b/changelogs/unreleased/ce-quick-fix-58727-collapsed-sidebar-flyout-menu-items-don-t-appear-in-1200px-screen-size.yml
@@ -0,0 +1,5 @@
+---
+title: Fix flyout nav on small viewports
+merge_request: 25998
+author:
+type: fixed
diff --git a/spec/javascripts/fly_out_nav_spec.js b/spec/javascripts/fly_out_nav_spec.js
index 7ef44f29c5b..4772f754937 100644
--- a/spec/javascripts/fly_out_nav_spec.js
+++ b/spec/javascripts/fly_out_nav_spec.js
@@ -14,6 +14,7 @@ import {
   setSidebar,
   subItemsMouseLeave,
 } from '~/fly_out_nav';
+import { SIDEBAR_COLLAPSED_CLASS } from '~/contextual_sidebar';
 import bp from '~/breakpoints';
 
 describe('Fly out sidebar navigation', () => {
@@ -219,7 +220,7 @@ describe('Fly out sidebar navigation', () => {
     it('shows collapsed only sub-items if icon only sidebar', () => {
       const subItems = el.querySelector('.sidebar-sub-level-items');
       const sidebar = document.createElement('div');
-      sidebar.classList.add('sidebar-collapsed-desktop');
+      sidebar.classList.add(SIDEBAR_COLLAPSED_CLASS);
       subItems.classList.add('is-fly-out-only');
 
       setSidebar(sidebar);
@@ -296,7 +297,7 @@ describe('Fly out sidebar navigation', () => {
 
     it('returns true when active & collapsed sidebar', () => {
       const sidebar = document.createElement('div');
-      sidebar.classList.add('sidebar-collapsed-desktop');
+      sidebar.classList.add(SIDEBAR_COLLAPSED_CLASS);
       el.classList.add('active');
 
       setSidebar(sidebar);