gitlab-ce/app/assets/javascripts/super_sidebar/components/super_sidebar_toggle.vue

<script>
import { GlButton, GlTooltipDirective } from '@gitlab/ui';
import { __ } from '~/locale';
import Tracking from '~/tracking';
import { JS_TOGGLE_COLLAPSE_CLASS, JS_TOGGLE_EXPAND_CLASS, sidebarState } from '../constants';
import { toggleSuperSidebarCollapsed } from '../super_sidebar_collapsed_state_manager';

export default {
  components: {
    GlButton,
  },
  directives: {
    GlTooltip: GlTooltipDirective,
  },
  mixins: [Tracking.mixin()],
  props: {
    tooltipContainer: {
      type: String,
      required: false,
      default: null,
    },
    tooltipPlacement: {
      type: String,
      required: false,
      default: 'right',
    },
  },
  i18n: {
    collapseSidebar: __('Hide sidebar'),
    expandSidebar: __('Show sidebar'),
    primaryNavigationSidebar: __('Primary navigation sidebar'),
  },
  data() {
    return sidebarState;
  },
  computed: {
    tooltipTitle() {
      if (this.isPeek) return '';

      return this.isCollapsed
        ? this.$options.i18n.expandSidebar
        : this.$options.i18n.collapseSidebar;
    },
    tooltip() {
      return {
        placement: this.tooltipPlacement,
        container: this.tooltipContainer,
        title: this.tooltipTitle,
      };
    },
    ariaExpanded() {
      return String(!this.isCollapsed);
    },
  },
  methods: {
    toggle() {
      this.track(this.isCollapsed ? 'nav_show' : 'nav_hide', {
        label: 'nav_toggle',
        property: 'nav_sidebar',
      });
      toggleSuperSidebarCollapsed(!this.isCollapsed, true);
      this.focusOtherToggle();
    },
    focusOtherToggle() {
      this.$nextTick(() => {
        const classSelector = this.isCollapsed ? JS_TOGGLE_EXPAND_CLASS : JS_TOGGLE_COLLAPSE_CLASS;
        const otherToggle = document.querySelector(`.${classSelector}`);
        otherToggle?.focus();
      });
    },
  },
};
</script>

<template>
  <gl-button
    v-gl-tooltip.hover.noninteractive.ds500="tooltip"
    aria-controls="super-sidebar"
    :aria-expanded="ariaExpanded"
    :aria-label="$options.i18n.primaryNavigationSidebar"
    icon="sidebar"
    category="tertiary"
    :disabled="isPeek"
    @click="toggle"
  />
</template>