akkoma-fe/src/components/account_switcher/account_switcher.vue

<template>
  <Popover
    trigger="click"
    class="SwitchAccounts"
    :bound-to="{ x: 'container' }"
    :offset="{ x: -16 }"
  >
    <template #trigger>
      <button
        class="button-unstyled switch-account-button"
      >
        <FAIcon
          fixed-width
          class="icon"
          icon="user-plus"
          :title="$t('user_card.switch_accounts')"
        />
      </button>
    </template>
    <template #content>
      <div class="dropdown-menu">
        <button
          v-for="account in accounts"
          class="button-default dropdown-item account-button"
          :class="account.id === currentUser.id ? 'selected' : ''"
          :key="account.screen_name"
          @click="switchAccount(account.screen_name)"
        >
          <UserAvatar
            :compact="true"
            :user="account"
          />
          <div class="right-side">
            <RichContent
              class="username"
              :title="'@'+account.screen_name"
              :html="account.name_html"
              :emoji="account.emoji"
            />
            <a>@{{ account.screen_name }}</a>
          </div>
        </button>
        <div
          role="separator"
          class="dropdown-divider"
        />
        <button
          class="button-default dropdown-item dropdown-item-icon"
          @click="login"
        >
          <FAIcon icon="right-to-bracket" />{{ $t('login.login') }}
        </button>
        <button
          v-if="registrationOpen"
          class="button-default dropdown-item dropdown-item-icon"
          @click="register"
        >
          <FAIcon icon="user-pen" />{{ $t('login.register') }}
        </button>
      </div>
    </template>
  </Popover>
</template>

<script src="./account_switcher.js"></script>

<style lang="scss">
@import '../../_variables.scss';

.button-default.dropdown-item.account-button {
  display: flex;

  &.selected {
    background-color: var(--selectedPost, $fallback--lightBg);
  }

  .Avatar {
    margin-right: 0.75em;
  }

  .right-side {
    margin: auto;
  }

  .username {
    font-weight: bolder;
    margin-right: 0.4em;
  }
}
</style>