diff options
Diffstat (limited to 'app/assets/javascripts/sidebar/components/toggle/toggle_sidebar.vue')
-rw-r--r-- | app/assets/javascripts/sidebar/components/toggle/toggle_sidebar.vue | 55 |
1 files changed, 55 insertions, 0 deletions
diff --git a/app/assets/javascripts/sidebar/components/toggle/toggle_sidebar.vue b/app/assets/javascripts/sidebar/components/toggle/toggle_sidebar.vue new file mode 100644 index 00000000000..6dacf4e10d3 --- /dev/null +++ b/app/assets/javascripts/sidebar/components/toggle/toggle_sidebar.vue @@ -0,0 +1,55 @@ +<script> +import { GlButton, GlTooltipDirective } from '@gitlab/ui'; +import { __ } from '~/locale'; + +export default { + name: 'ToggleSidebar', + components: { + GlButton, + }, + directives: { + GlTooltip: GlTooltipDirective, + }, + props: { + collapsed: { + type: Boolean, + required: true, + }, + cssClasses: { + type: String, + required: false, + default: '', + }, + }, + computed: { + tooltipLabel() { + return this.collapsed ? __('Expand sidebar') : __('Collapse sidebar'); + }, + buttonIcon() { + return this.collapsed ? 'chevron-double-lg-left' : 'chevron-double-lg-right'; + }, + allCssClasses() { + return [this.cssClasses, { 'js-sidebar-collapsed': this.collapsed }]; + }, + }, + methods: { + toggle() { + this.$emit('toggle'); + }, + }, +}; +</script> + +<template> + <gl-button + v-gl-tooltip:body.viewport.left + :title="tooltipLabel" + :class="allCssClasses" + class="gutter-toggle btn-sidebar-action js-sidebar-vue-toggle" + :icon="buttonIcon" + category="tertiary" + size="small" + :aria-label="__('toggle collapse')" + @click="toggle" + /> +</template> |