1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
<script>
import { FREQUENT_ITEMS_PROJECTS, FREQUENT_ITEMS_GROUPS } from '~/frequent_items/constants';
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, hasMenuExpanded } from '../utils';
import ResponsiveHeader from './responsive_header.vue';
import ResponsiveHome from './responsive_home.vue';
import TopNavContainerView from './top_nav_container_view.vue';
export default {
components: {
KeepAliveSlots,
ResponsiveHeader,
ResponsiveHome,
TopNavContainerView,
},
props: {
navData: {
type: Object,
required: true,
},
},
data() {
return {
activeView: 'home',
hasMobileOverlay: false,
};
},
computed: {
nav() {
return resetMenuItemsActive(this.navData);
},
},
created() {
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);
this.$root.$off(BV_DROPDOWN_SHOW, this.showMobileOverlay);
this.$root.$off(BV_DROPDOWN_HIDE, this.hideMobileOverlay);
},
methods: {
updateResponsiveOpen() {
if (hasMenuExpanded()) {
document.body.classList.add('top-nav-responsive-open');
} else {
document.body.classList.remove('top-nav-responsive-open');
}
},
onMenuItemClick({ view }) {
if (view) {
this.activeView = view;
}
},
showMobileOverlay() {
this.hasMobileOverlay = true;
},
hideMobileOverlay() {
this.hasMobileOverlay = false;
},
},
FREQUENT_ITEMS_PROJECTS,
FREQUENT_ITEMS_GROUPS,
};
</script>
<template>
<div>
<div
class="mobile-overlay"
:class="{ 'mobile-nav-open': hasMobileOverlay }"
data-testid="mobile-overlay"
></div>
<keep-alive-slots :slot-key="activeView">
<template #home>
<responsive-home :nav-data="nav" @menu-item-click="onMenuItemClick" />
</template>
<template #projects>
<responsive-header @menu-item-click="onMenuItemClick">
{{ __('Projects') }}
</responsive-header>
<top-nav-container-view
:frequent-items-dropdown-type="$options.FREQUENT_ITEMS_PROJECTS.namespace"
:frequent-items-vuex-module="$options.FREQUENT_ITEMS_PROJECTS.vuexModule"
container-class="gl-px-3"
v-bind="nav.views.projects"
/>
</template>
<template #groups>
<responsive-header @menu-item-click="onMenuItemClick">
{{ __('Groups') }}
</responsive-header>
<top-nav-container-view
:frequent-items-dropdown-type="$options.FREQUENT_ITEMS_GROUPS.namespace"
:frequent-items-vuex-module="$options.FREQUENT_ITEMS_GROUPS.vuexModule"
container-class="gl-px-3"
v-bind="nav.views.groups"
/>
</template>
</keep-alive-slots>
</div>
</template>
|
