zengzy / rps · Files

<script setup lang="ts">
import type { DropdownMenuItem } from '@nuxt/ui'
import type { Locale } from '~/composables/useAppI18n'

defineProps<{
  collapsed?: boolean
}>()

const colorMode = useColorMode()
const appConfig = useAppConfig()
const { locale, setLocale, t } = useAppI18n()
const toast = useToast()
const { user, logout } = useAuth()

const handleLogout = async () => {
  logout()
  await navigateTo('/login')

  toast.add({
    title: t('userMenu.logoutSuccessTitle'),
    description: t('userMenu.logoutSuccessDescription'),
    color: 'success'
  })
}

const colors = ['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose']
const neutrals = ['slate', 'gray', 'zinc', 'neutral', 'stone']

const displayUser = computed(() => ({
  name: user.value?.name ?? t('userMenu.defaultName'),
  avatar: user.value?.avatar ?? {
    src: 'https://i.pravatar.cc/128?u=robot-default-user',
    alt: t('userMenu.defaultName')
  }
}))

const localeOptions = computed<{ label: string, value: Locale }[]>(() => [
  { label: t('common.chinese'), value: 'zh-CN' },
  { label: t('common.english'), value: 'en' }
])

const items = computed<DropdownMenuItem[][]>(() => ([[{
  type: 'label',
  label: displayUser.value.name,
  avatar: displayUser.value.avatar
}], [{
  label: t('userMenu.profile'),
  icon: 'i-lucide-user',
  to: '/settings'
}, {
  // label: t('userMenu.billing'),
  // icon: 'i-lucide-credit-card'
// }, {
  label: t('userMenu.settings'),
  icon: 'i-lucide-settings',
  to: '/settings'
}], [{
  label: t('common.language'),
  icon: 'i-lucide-languages',
  children: localeOptions.value.map(option => ({
    label: option.label,
    type: 'checkbox',
    checked: locale.value === option.value,
    onSelect: (e: Event) => {
      e.preventDefault()
      setLocale(option.value)
    }
  }))
}, {
  label: t('userMenu.theme'),
  icon: 'i-lucide-palette',
  children: [{
    label: t('userMenu.primary'),
    slot: 'chip',
    chip: appConfig.ui.colors.primary,
    content: {
      align: 'center',
      collisionPadding: 16
    },
    children: colors.map(color => ({
      label: color,
      chip: color,
      slot: 'chip',
      checked: appConfig.ui.colors.primary === color,
      type: 'checkbox',
      onSelect: (e) => {
        e.preventDefault()

        appConfig.ui.colors.primary = color
      }
    }))
  }, {
    label: t('userMenu.neutral'),
    slot: 'chip',
    chip: appConfig.ui.colors.neutral === 'neutral' ? 'old-neutral' : appConfig.ui.colors.neutral,
    content: {
      align: 'end',
      collisionPadding: 16
    },
    children: neutrals.map(color => ({
      label: color,
      chip: color === 'neutral' ? 'old-neutral' : color,
      slot: 'chip',
      type: 'checkbox',
      checked: appConfig.ui.colors.neutral === color,
      onSelect: (e) => {
        e.preventDefault()

        appConfig.ui.colors.neutral = color
      }
    }))
  }]
}, {
  label: t('userMenu.appearance'),
  icon: 'i-lucide-sun-moon',
  children: [{
    label: t('userMenu.light'),
    icon: 'i-lucide-sun',
    type: 'checkbox',
    checked: colorMode.value === 'light',
    onSelect(e: Event) {
      e.preventDefault()

      colorMode.preference = 'light'
    }
  }, {
    label: t('userMenu.dark'),
    icon: 'i-lucide-moon',
    type: 'checkbox',
    checked: colorMode.value === 'dark',
    onUpdateChecked(checked: boolean) {
      if (checked) {
        colorMode.preference = 'dark'
      }
    },
    onSelect(e: Event) {
      e.preventDefault()
    }
  }]
}], [
  // {
  //   label: t('userMenu.templates'),
  //   icon: 'i-lucide-layout-template',
  //   children: [{
  //     label: t('userMenu.starter'),
  //     to: 'https://starter-template.nuxt.dev/'
  //   }, {
  //     label: t('userMenu.landing'),
  //     to: 'https://landing-template.nuxt.dev/'
  //   }, {
  //     label: t('userMenu.docs'),
  //     to: 'https://docs-template.nuxt.dev/'
  //   }, {
  //     label: t('userMenu.saas'),
  //     to: 'https://saas-template.nuxt.dev/'
  //   }, {
  //     label: t('userMenu.dashboard'),
  //     to: 'https://dashboard-template.nuxt.dev/',
  //     color: 'primary',
  //     checked: true,
  //     type: 'checkbox'
  //   }, {
  //     label: t('userMenu.chat'),
  //     to: 'https://chat-template.nuxt.dev/'
  //   }, {
  //     label: t('userMenu.portfolio'),
  //     to: 'https://portfolio-template.nuxt.dev/'
  //   }, {
  //     label: t('userMenu.changelog'),
  //     to: 'https://changelog-template.nuxt.dev/'
  //   }]
  // }
], [{
  // label: t('userMenu.documentation'),
  // icon: 'i-lucide-book-open',
  // to: 'https://ui.nuxt.com/docs/getting-started/installation/nuxt',
  // target: '_blank'
// }, {
  // label: t('userMenu.githubRepository'),
  // icon: 'i-simple-icons-github',
  // to: 'https://github.com/nuxt-ui-templates/dashboard',
  // target: '_blank'
// }, {
  label: t('userMenu.logout'),
  icon: 'i-lucide-log-out',
  onSelect: () => handleLogout()
}]]))
</script>

<template>
  <UDropdownMenu
    :items="items"
    :content="{ align: 'center', collisionPadding: 12 }"
    :ui="{ content: collapsed ? 'w-48' : 'w-(--reka-dropdown-menu-trigger-width)' }"
  >
    <UButton
      v-bind="{
        ...displayUser,
        label: collapsed ? undefined : displayUser?.name,
        trailingIcon: collapsed ? undefined : 'i-lucide-chevrons-up-down'
      }"
      color="neutral"
      variant="ghost"
      block
      :square="collapsed"
      class="data-[state=open]:bg-elevated"
      :ui="{
        trailingIcon: 'text-dimmed'
      }"
    />

    <template #chip-leading="{ item }">
      <div class="inline-flex items-center justify-center shrink-0 size-5">
        <span
          class="rounded-full ring ring-bg bg-(--chip-light) dark:bg-(--chip-dark) size-2"
          :style="{
            '--chip-light': `var(--color-${(item as any).chip}-500)`,
            '--chip-dark': `var(--color-${(item as any).chip}-400)`
          }"
        />
      </div>
    </template>
  </UDropdownMenu>
</template>