rustfs-console/components/user-dropdown.vue

<template>
  <n-dropdown :options="options" placement="right-end" @select="handleDropdownClick">
    <div class="flex items-center border-t dark:border-neutral-800 p-4">
      <div class="rounded-full h-8 w-8 object-cover bg-gray-100 border overflow-hidden">
        <img class="min-h-full" size="small" src="~/assets/img/rustfs.png" />
      </div>
      <template v-if="!isCollapsed">
        <span class="px-2">{{ t('RustFS') }}</span>
        <Icon name="ri:more-2-line" class="ml-auto text-xl" />
      </template>
    </div>
  </n-dropdown>
</template>

<script lang="ts" setup>
import { Icon } from '#components';
import { defineProps, withDefaults } from 'vue';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const { logout } = useAuth();
const router = useRouter();

const handleLogout = async () => {
  await logout();
  router.push('/auth/login');
};

const handleDropdownClick = (key: string) => {
  if (key === 'logout') {
    handleLogout();
  }
};

const props = withDefaults(
  defineProps<{
    isCollapsed?: boolean;
  }>(),
  {
    isCollapsed: false,
  }
);

const options = [
  // {
  //   label: t('Profile'),
  //   key: 'profile',
  //   icon: () => icon('ri:account-box-line')
  // },
  {
    label: t('Logout'),
    key: 'logout',
    icon: () => icon('ri:logout-box-r-line'),
  },
];
</script>