Commit 4eca9329 authored by Mauricio Gonzalez's avatar Mauricio Gonzalez Committed by Paul Slaughter

Patch from @pslaughter

parent 0ac46aa6
...@@ -203,10 +203,7 @@ $body.on('ajax:complete, ajax:beforeSend, submit', 'form', function ajaxComplete ...@@ -203,10 +203,7 @@ $body.on('ajax:complete, ajax:beforeSend, submit', 'form', function ajaxComplete
}); });
$('.navbar-toggler').on('click', () => { $('.navbar-toggler').on('click', () => {
// The order is important. The `menu-expanded` is used as a source of truth for now. document.body.classList.toggle('top-nav-responsive-open');
// This can be simplified when the :combined_menu feature flag is removed.
// https://gitlab.com/gitlab-org/gitlab/-/issues/333180
navEventHub.$emit(EVENT_RESPONSIVE_TOGGLE);
}); });
/** /**
......
...@@ -2,8 +2,7 @@ ...@@ -2,8 +2,7 @@
import { FREQUENT_ITEMS_PROJECTS, FREQUENT_ITEMS_GROUPS } from '~/frequent_items/constants'; import { FREQUENT_ITEMS_PROJECTS, FREQUENT_ITEMS_GROUPS } from '~/frequent_items/constants';
import { BV_DROPDOWN_SHOW, BV_DROPDOWN_HIDE } from '~/lib/utils/constants'; import { BV_DROPDOWN_SHOW, BV_DROPDOWN_HIDE } from '~/lib/utils/constants';
import KeepAliveSlots from '~/vue_shared/components/keep_alive_slots.vue'; import KeepAliveSlots from '~/vue_shared/components/keep_alive_slots.vue';
import eventHub, { EVENT_RESPONSIVE_TOGGLE } from '../event_hub'; import { resetMenuItemsActive } from '../utils';
import { resetMenuItemsActive, hasMenuExpanded } from '../utils';
import ResponsiveHeader from './responsive_header.vue'; import ResponsiveHeader from './responsive_header.vue';
import ResponsiveHome from './responsive_home.vue'; import ResponsiveHome from './responsive_home.vue';
import TopNavContainerView from './top_nav_container_view.vue'; import TopNavContainerView from './top_nav_container_view.vue';
...@@ -33,25 +32,14 @@ export default { ...@@ -33,25 +32,14 @@ export default {
}, },
}, },
created() { created() {
eventHub.$on(EVENT_RESPONSIVE_TOGGLE, this.updateResponsiveOpen);
this.$root.$on(BV_DROPDOWN_SHOW, this.showMobileOverlay); this.$root.$on(BV_DROPDOWN_SHOW, this.showMobileOverlay);
this.$root.$on(BV_DROPDOWN_HIDE, this.hideMobileOverlay); this.$root.$on(BV_DROPDOWN_HIDE, this.hideMobileOverlay);
this.updateResponsiveOpen();
}, },
beforeDestroy() { beforeDestroy() {
eventHub.$off(EVENT_RESPONSIVE_TOGGLE, this.onToggle);
this.$root.$off(BV_DROPDOWN_SHOW, this.showMobileOverlay); this.$root.$off(BV_DROPDOWN_SHOW, this.showMobileOverlay);
this.$root.$off(BV_DROPDOWN_HIDE, this.hideMobileOverlay); this.$root.$off(BV_DROPDOWN_HIDE, this.hideMobileOverlay);
}, },
methods: { methods: {
updateResponsiveOpen() {
if (hasMenuExpanded()) {
document.body.classList.add('top-nav-responsive-open');
} else {
document.body.classList.remove('top-nav-responsive-open');
}
},
onMenuItemClick({ view }) { onMenuItemClick({ view }) {
if (view) { if (view) {
this.activeView = view; this.activeView = view;
......
import eventHubFactory from '~/helpers/event_hub_factory';
export const EVENT_RESPONSIVE_TOGGLE = 'top-nav-responsive-toggle';
export default eventHubFactory();
export const hasMenuExpanded = () =>
Boolean(document.querySelector('.header-content.menu-expanded'));
export * from './has_menu_expanded';
export * from './reset_menu_items_active'; export * from './reset_menu_items_active';
...@@ -27,17 +27,6 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important ...@@ -27,17 +27,6 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
display: none; display: none;
} }
.menu-expanded {
.more-icon {
display: none;
}
.close-icon {
display: block;
margin: auto;
}
}
.header-content { .header-content {
width: 100%; width: 100%;
display: flex; display: flex;
...@@ -103,18 +92,6 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important ...@@ -103,18 +92,6 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
.navbar-collapse > ul.nav > li:not(.d-none) { .navbar-collapse > ul.nav > li:not(.d-none) {
margin: 0 2px; margin: 0 2px;
} }
&.menu-expanded {
@include media-breakpoint-down(xs) {
.hide-when-top-nav-responsive-open {
display: none;
}
.navbar-collapse {
display: flex;
}
}
}
} }
.navbar-collapse { .navbar-collapse {
...@@ -673,19 +650,30 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important ...@@ -673,19 +650,30 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
} }
.top-nav-responsive-open { .top-nav-responsive-open {
.hide-when-top-nav-responsive-open { .more-icon {
@include media-breakpoint-down(xs) { display: none;
}
.close-icon {
display: block;
margin: auto;
}
@include media-breakpoint-down(xs) {
.navbar-collapse {
display: flex;
}
.hide-when-top-nav-responsive-open {
display: none !important; display: none !important;
} }
}
.top-nav-responsive { .top-nav-responsive {
@include media-breakpoint-down(xs) {
@include gl-display-block; @include gl-display-block;
} }
}
.navbar-gitlab .header-content .title-container { .navbar-gitlab .header-content .title-container {
flex: 0; flex: 0;
}
} }
} }
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment