Add latest changes from gitlab-org/gitlab@master

3 files changed, 17 insertions, 4 deletions

diff --git a/app/assets/javascripts/nav/components/responsive_app.vue b/app/assets/javascripts/nav/components/responsive_app.vue
index cef1a14df19..d601586a3f8 100644
--- a/app/assets/javascripts/nav/components/responsive_app.vue
+++ b/app/assets/javascripts/nav/components/responsive_app.vue
@@ -3,7 +3,7 @@ import { FREQUENT_ITEMS_PROJECTS, FREQUENT_ITEMS_GROUPS } from '~/frequent_items
 import { BV_DROPDOWN_SHOW, BV_DROPDOWN_HIDE } from '~/lib/utils/constants';
 import KeepAliveSlots from '~/vue_shared/components/keep_alive_slots.vue';
 import eventHub, { EVENT_RESPONSIVE_TOGGLE } from '../event_hub';
-import { resetMenuItemsActive } from '../utils/reset_menu_items_active';
+import { resetMenuItemsActive, hasMenuExpanded } from '../utils';
 import ResponsiveHeader from './responsive_header.vue';
 import ResponsiveHome from './responsive_home.vue';
 import TopNavContainerView from './top_nav_container_view.vue';
@@ -33,9 +33,11 @@ export default {
     },
   },
   created() {
-    eventHub.$on(EVENT_RESPONSIVE_TOGGLE, this.onToggle);
+    eventHub.$on(EVENT_RESPONSIVE_TOGGLE, this.updateResponsiveOpen);
     this.$root.$on(BV_DROPDOWN_SHOW, this.showMobileOverlay);
     this.$root.$on(BV_DROPDOWN_HIDE, this.hideMobileOverlay);
+
+    this.updateResponsiveOpen();
   },
   beforeDestroy() {
     eventHub.$off(EVENT_RESPONSIVE_TOGGLE, this.onToggle);
@@ -43,8 +45,12 @@ export default {
     this.$root.$off(BV_DROPDOWN_HIDE, this.hideMobileOverlay);
   },
   methods: {
-    onToggle() {
-      document.body.classList.toggle('top-nav-responsive-open');
+    updateResponsiveOpen() {
+      if (hasMenuExpanded()) {
+        document.body.classList.add('top-nav-responsive-open');
+      } else {
+        document.body.classList.remove('top-nav-responsive-open');
+      }
     },
     onMenuItemClick({ view }) {
       if (view) {
diff --git a/app/assets/javascripts/nav/utils/has_menu_expanded.js b/app/assets/javascripts/nav/utils/has_menu_expanded.js
new file mode 100644
index 00000000000..4e4d6c7c71e
--- /dev/null
+++ b/app/assets/javascripts/nav/utils/has_menu_expanded.js
@@ -0,0 +1,5 @@
+export const hasMenuExpanded = () => {
+  const header = document.querySelector('.header-content');
+
+  return Boolean(header?.classList.contains('menu-expanded'));
+};
diff --git a/app/assets/javascripts/nav/utils/index.js b/app/assets/javascripts/nav/utils/index.js
new file mode 100644
index 00000000000..4fa3d0910da
--- /dev/null
+++ b/app/assets/javascripts/nav/utils/index.js
@@ -0,0 +1,2 @@
+export * from './has_menu_expanded';
+export * from './reset_menu_items_active';