67 lines
1.8 KiB
Vue
67 lines
1.8 KiB
Vue
|
<script>
|
||
|
|
import { GlNav, GlNavItem } from '@gitlab/ui';
|
||
|
|
import { mapActions, mapState } from 'vuex';
|
||
|
|
import { formatNumber } from '~/locale';
|
||
|
|
import Tracking from '~/tracking';
|
||
|
|
import { NAV_LINK_DEFAULT_CLASSES, NUMBER_FORMATING_OPTIONS } from '../constants';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'ScopeNavigation',
|
||
|
|
components: {
|
||
|
|
GlNav,
|
||
|
|
GlNavItem,
|
||
|
|
},
|
||
|
|
mixins: [Tracking.mixin()],
|
||
|
|
computed: {
|
||
|
|
...mapState(['navigation', 'urlQuery']),
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.fetchSidebarCount();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
...mapActions(['fetchSidebarCount']),
|
||
|
|
activeClasses(currentScope) {
|
||
|
|
return currentScope === this.urlQuery.scope ? 'gl-font-weight-bold' : '';
|
||
|
|
},
|
||
|
|
showFormatedCount(count) {
|
||
|
|
if (!count) {
|
||
|
|
return '0';
|
||
|
|
}
|
||
|
|
const countNumber = parseInt(count.replace(/,/g, ''), 10);
|
||
|
|
return formatNumber(countNumber, NUMBER_FORMATING_OPTIONS);
|
||
|
|
},
|
||
|
|
handleClick(scope) {
|
||
|
|
this.track('click_menu_item', { label: `vertical_navigation_${scope}` });
|
||
|
|
},
|
||
|
|
linkClasses(scope) {
|
||
|
|
return [
|
||
|
|
{ 'gl-font-weight-bold': scope === this.urlQuery.scope },
|
||
|
|
...this.$options.NAV_LINK_DEFAULT_CLASSES,
|
||
|
|
];
|
||
|
|
},
|
||
|
|
},
|
||
|
|
NAV_LINK_DEFAULT_CLASSES,
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<nav data-testid="search-filter">
|
||
|
|
<gl-nav vertical pills>
|
||
|
|
<gl-nav-item
|
||
|
|
v-for="(item, scope, index) in navigation"
|
||
|
|
:key="scope"
|
||
|
|
:link-classes="linkClasses(scope)"
|
||
|
|
class="gl-mb-1"
|
||
|
|
:href="item.link"
|
||
|
|
:active="urlQuery.scope ? urlQuery.scope === scope : index === 0"
|
||
|
|
@click="handleClick(scope)"
|
||
|
|
><span>{{ item.label }}</span
|
||
|
|
><span v-if="item.count" class="gl-font-sm gl-font-weight-normal">
|
||
|
|
{{ showFormatedCount(item.count) }}
|
||
|
|
</span>
|
||
|
|
</gl-nav-item>
|
||
|
|
</gl-nav>
|
||
|
|
<hr class="gl-mt-5 gl-mb-0 gl-border-gray-100 gl-md-display-none" />
|
||
|
|
</nav>
|
||
|
|
</template>
|