tifyでQiita風UIを作る - チーム切り替えメニュー

<template lang="pug">
// チーム切り替えメニュー
v-menu(offset-y nudge-bottom="16px")

  // activator 
  v-sheet.mr-2(slot="activator" color="green darken-2")
    v-icon arrow_drop_down

  // 別のチームにログインしている 
  v-card(v-if="isLoginToTeam" width="300px")
    v-list(dense)
      v-subheader ログイン中のチーム
      template(v-for="team, i in teams")
        v-divider.my-1(v-if="i!=0" inset)
        v-list-tile(avatar @click="" :key="team.name")
          v-list-tile-action
            v-icon(v-if="team.view") mdi-check
          v-list-tile-content
            v-list-tile-title {{ team.name }}
          v-spacer
          v-layout(align-center justify-end)
            v-avatar(size="20px")
              v-img(:src="team.user.img")
            span.ml-1 {{ team.user.name }}
      v-divider.my-1
      v-list-tile(avatar @click="")
        v-list-tile-action
          v-icon mdi-exit-to-app
        v-list-tile-content
          v-list-tile-title 別のチームにログイン...

  // 別のチームにログインしていない
  v-card(v-else width="250px")
    v-list(dense)
      v-list-tile(avatar @click="" )
        v-list-tile-action
          v-icon mdi-check
        v-list-tile-content
          v-list-tile-title Qiita
      v-divider.my-1
      v-subheader ログイン中のチームがありません
      v-list-tile(avatar @click="")
        v-list-tile-action
          v-icon mdi-exit-to-app
        v-list-tile-content
          v-list-tile-title Qiita:Team にログイン...
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  data: () => ({
    isLoginToTeam: true,
    teams: [
      { view: false, name: "HogeTeam", user: { name: "totto357", img: "https://qiita-image-store.s3.amazonaws.com/0/97227/profile-images/1516012241" }},
      { view: true, name: "Qiita", user: { name: "totto357", img: "https://qiita-image-store.s3.amazonaws.com/0/97227/profile-images/1516012241" }},
    ],
  }),
})
</script>