diff options
Diffstat (limited to 'app/assets/javascripts/ide/components/ide_sidebar_nav.vue')
-rw-r--r-- | app/assets/javascripts/ide/components/ide_sidebar_nav.vue | 83 |
1 files changed, 83 insertions, 0 deletions
diff --git a/app/assets/javascripts/ide/components/ide_sidebar_nav.vue b/app/assets/javascripts/ide/components/ide_sidebar_nav.vue new file mode 100644 index 00000000000..966c36d6e71 --- /dev/null +++ b/app/assets/javascripts/ide/components/ide_sidebar_nav.vue @@ -0,0 +1,83 @@ +<script> +import { GlTooltipDirective, GlIcon } from '@gitlab/ui'; +import { otherSide } from '../utils'; +import { SIDE_RIGHT } from '../constants'; + +export default { + directives: { + tooltip: GlTooltipDirective, + }, + components: { + GlIcon, + }, + props: { + tabs: { + type: Array, + required: true, + }, + side: { + type: String, + required: true, + }, + currentView: { + type: String, + required: false, + default: '', + }, + isOpen: { + type: Boolean, + required: false, + default: false, + }, + }, + computed: { + otherSide() { + return otherSide(this.side); + }, + }, + methods: { + isActiveTab(tab) { + return this.isOpen && tab.views.some(view => view.name === this.currentView); + }, + buttonClasses(tab) { + return [ + { + 'is-right': this.side === SIDE_RIGHT, + active: this.isActiveTab(tab), + }, + ...(tab.buttonClasses || []), + ]; + }, + clickTab(e, tab) { + e.currentTarget.blur(); + this.$root.$emit('bv::hide::tooltip'); + + if (this.isActiveTab(tab)) { + this.$emit('close'); + } else { + this.$emit('open', tab.views[0]); + } + }, + }, +}; +</script> +<template> + <nav class="ide-activity-bar"> + <ul class="list-unstyled"> + <li v-for="tab of tabs" :key="tab.title"> + <button + v-tooltip="{ container: 'body', placement: otherSide }" + :title="tab.title" + :aria-label="tab.title" + :class="buttonClasses(tab)" + :data-qa-selector="`${tab.title.toLowerCase()}_tab_button`" + class="ide-sidebar-link" + type="button" + @click="clickTab($event, tab)" + > + <gl-icon :size="16" :name="tab.icon" /> + </button> + </li> + </ul> + </nav> +</template> |