doccano/frontend/components/organisms/layout/TheHeader.vue

<template>
  <v-app-bar
    app
    clipped-left
  >
    <slot name="leftDrawerIcon" />
    <nuxt-link
      v-if="!isAuthenticated"
      to="/"
      style="line-height:0;"
    >
      <img src="~/assets/icon.png" height="48">
    </nuxt-link>
    <v-toolbar-title
      v-if="!isAuthenticated"
      class="ml-2 d-none d-sm-flex"
    >
      doccano
    </v-toolbar-title>
    <v-btn
      v-if="isAuthenticated && isIndividualProject"
      text
      style="text-transform:none"
    >
      <v-icon small class="mr-1">
        mdi-hexagon-multiple
      </v-icon>
      <span> {{ currentProject.name }}</span>
    </v-btn>
    <div class="flex-grow-1" />
    <the-color-mode-switcher />
    <v-menu
      open-on-hover
      offset-y
    >
      <template v-slot:activator="{ on }">
        <v-btn
          text
          v-on="on"
        >
          {{ $i18n.locale }}
          <v-icon>mdi-menu-down</v-icon>
        </v-btn>
      </template>
      <v-list
        v-for="locale in $i18n.locales"
        :key="locale.code"
      >
        <nuxt-link
          class="v-list-item v-list-item--link theme--dark"
          :to="switchLocalePath(locale.code)"
        >
          {{ locale.name }}
        </nuxt-link>
      </v-list>
    </v-menu>
    <v-btn
      v-if="isAuthenticated"
      text
      @click="$router.push(localePath('/projects'))"
    >
      {{ $t('header.projects') }}
    </v-btn>
    <v-menu
      v-if="!isAuthenticated"
      open-on-hover
      offset-y
    >
      <template v-slot:activator="{ on }">
        <v-btn
          text
          v-on="on"
        >
          {{ $t('home.demoDropDown') }}
          <v-icon>mdi-menu-down</v-icon>
        </v-btn>
      </template>
      <v-list>
        <v-list-item
          v-for="(item, index) in items"
          :key="index"
          @click="$router.push('/demo/' + item.link)"
        >
          <v-list-item-title>{{ item.title }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>
    <v-btn
      v-if="!isAuthenticated"
      outlined
      @click="$router.push(localePath('/auth'))"
    >
      {{ $t('user.login') }}
    </v-btn>
    <v-menu
      v-if="isAuthenticated"
      offset-y
    >
      <template v-slot:activator="{ on }">
        <v-btn on icon v-on="on">
          <v-icon>mdi-dots-vertical</v-icon>
        </v-btn>
      </template>
      <v-list>
        <v-subheader>{{ getUsername() }}</v-subheader>
        <v-list-item @click="signout">
          <v-list-item-icon>
            <v-icon>mdi-logout</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>
              {{ $t('user.signOut') }}
            </v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-menu>
  </v-app-bar>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import TheColorModeSwitcher from '@/components/organisms/layout/TheColorModeSwitcher'

export default {
  components: {
    TheColorModeSwitcher
  },

  data() {
    return {
      items: [
        { title: this.$t('home.demoNER'), link: 'named-entity-recognition' },
        { title: this.$t('home.demoSent'), link: 'sentiment-analysis' },
        { title: this.$t('home.demoTranslation'), link: 'translation' },
        { title: this.$t('home.demoTextToSQL'), link: 'text-to-sql' }
      ]
    }
  },

  computed: {
    ...mapGetters('auth', ['isAuthenticated', 'getUsername']),
    ...mapGetters('projects', ['currentProject']),

    isIndividualProject() {
      return this.$route.name && this.$route.name.startsWith('projects-id')
    }
  },

  methods: {
    ...mapActions('auth', ['logout']),
    signout() {
      this.logout()
      this.$router.push('/')
    }
  }
}
</script>