Chatwoot/app/javascript/dashboard/components/layout/SidebarItem.vue

<template>
  <router-link
    :to="menuItem.toState"
    tag="li"
    active-class="active"
    :class="computedClass"
  >
    <a
      class="sub-menu-title"
      :class="getMenuItemClass"
      data-tooltip
      aria-haspopup="true"
      :title="menuItem.toolTip"
    >
      <div class="wrap">
        <fluent-icon
          size="18"
          :icon="menuItem.icon"
          class="margin-right-small"
        />
        {{ $t(`SIDEBAR.${menuItem.label}`) }}
      </div>
      <button
        v-if="showItem(menuItem)"
        class="child-icon"
        @click.prevent="newLinkClick(menuItem)"
      >
        <fluent-icon icon="add-circle" size="16" />
      </button>
    </a>
    <ul v-if="menuItem.hasSubMenu" class="nested vertical menu">
      <router-link
        v-for="child in menuItem.children"
        :key="child.id"
        active-class="active flex-container"
        tag="li"
        :to="child.toState"
      >
        <a href="#" :class="computedChildClass(child)">
          <div class="wrap">
            <fluent-icon
              v-if="menuItem.key === 'inbox'"
              class="inbox-icon"
              size="14"
              :icon="computedInboxClass(child)"
            />
            <span
              v-if="child.color"
              class="label-color--display"
              :style="{ backgroundColor: child.color }"
            />
            <div
              :title="computedChildTitle(child)"
              :class="computedChildClass(child)"
            >
              {{ child.label }}
            </div>
          </div>
        </a>
      </router-link>
    </ul>
  </router-link>
</template>

<script>
import { mapGetters } from 'vuex';

import router from '../../routes';
import adminMixin from '../../mixins/isAdmin';
import { getInboxClassByType } from 'dashboard/helper/inbox';
export default {
  mixins: [adminMixin],
  props: {
    menuItem: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  computed: {
    ...mapGetters({
      activeInbox: 'getSelectedInbox',
    }),
    getMenuItemClass() {
      return this.menuItem.cssClass
        ? `side-menu ${this.menuItem.cssClass}`
        : 'side-menu';
    },
    computedClass() {
      // If active Inbox is present
      // donot highlight conversations
      if (this.activeInbox) return ' ';

      if (
        this.$store.state.route.name === 'inbox_conversation' &&
        this.menuItem.toStateName === 'home'
      ) {
        return 'active';
      }
      return ' ';
    },
  },
  methods: {
    computedInboxClass(child) {
      const { type, phoneNumber } = child;
      const classByType = getInboxClassByType(type, phoneNumber);
      return classByType;
    },
    computedChildClass(child) {
      if (!child.truncateLabel) return '';
      return 'text-truncate';
    },
    computedChildTitle(child) {
      if (!child.truncateLabel) return false;
      return child.label;
    },
    newLinkClick(item) {
      if (item.newLinkRouteName) {
        router.push({ name: item.newLinkRouteName, params: { page: 'new' } });
      } else if (item.showModalForNewItem) {
        if (item.modalName === 'AddLabel') {
          this.$emit('add-label');
        }
      }
    },
    showItem(item) {
      return this.isAdmin && item.newLink !== undefined;
    },
  },
};
</script>
<style lang="scss" scoped>
@import '~dashboard/assets/scss/variables';

.sub-menu-title {
  display: flex;
  justify-content: space-between;
}

.wrap {
  display: flex;
  align-items: center;
}

.label-color--display {
  border-radius: $space-smaller;
  height: $space-normal;
  margin-right: $space-small;
  min-width: $space-normal;
  width: $space-normal;
}
</style>