187 lines
4.0 KiB
Vue
187 lines
4.0 KiB
Vue
<template>
|
|
<UDropdownMenu
|
|
:items="items"
|
|
:content="{ align: 'center', collisionPadding: 12 }"
|
|
:ui="{ content: collapsed ? 'w-48' : 'w-(--reka-dropdown-menu-trigger-width)' }"
|
|
>
|
|
<UButton
|
|
v-bind="{
|
|
...user,
|
|
label: collapsed ? undefined : user?.name,
|
|
trailingIcon: collapsed ? undefined : 'i-lucide-chevrons-up-down'
|
|
}"
|
|
color="neutral"
|
|
variant="ghost"
|
|
block
|
|
:square="collapsed"
|
|
class="data-[state=open]:bg-(--ui-bg-elevated)"
|
|
:ui="{
|
|
trailingIcon: 'text-(--ui-text-dimmed)'
|
|
}"
|
|
/>
|
|
|
|
<template #chip-leading="{ item }">
|
|
<span
|
|
:style="{ '--chip': `var(--color-${(item as any).chip}-400)` }"
|
|
class="ms-0.5 size-2 rounded-full bg-(--chip)"
|
|
/>
|
|
</template>
|
|
</UDropdownMenu>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { DropdownMenuItem } from '@nuxt/ui'
|
|
|
|
defineProps<{
|
|
collapsed?: boolean
|
|
}>()
|
|
|
|
const colorMode = useColorMode()
|
|
const appConfig = useAppConfig()
|
|
|
|
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 { user: betterAuthUser, signOut } = await useAuth()
|
|
|
|
const user = ref({
|
|
name: betterAuthUser.value?.name,
|
|
avatar: {
|
|
src: '/_nuxt/public/favicon.ico',
|
|
alt: betterAuthUser.value?.name
|
|
}
|
|
})
|
|
|
|
const items = computed<DropdownMenuItem[][]>(() => [
|
|
[
|
|
{
|
|
type: 'label',
|
|
label: user.value.name,
|
|
avatar: user.value.avatar
|
|
}
|
|
],
|
|
[
|
|
{
|
|
label: 'Profile',
|
|
icon: 'i-lucide-user'
|
|
},
|
|
{
|
|
label: 'Administration',
|
|
icon: 'i-lucide-user',
|
|
to: '/administration'
|
|
},
|
|
{
|
|
label: 'Settings',
|
|
icon: 'i-lucide-settings',
|
|
to: '/settings'
|
|
}
|
|
],
|
|
[
|
|
{
|
|
label: 'Theme',
|
|
icon: 'i-lucide-palette',
|
|
children: [
|
|
{
|
|
label: '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: 'Neutral',
|
|
slot: 'chip',
|
|
chip: appConfig.ui.colors.neutral,
|
|
content: {
|
|
align: 'end',
|
|
collisionPadding: 16
|
|
},
|
|
children: neutrals.map((color) => ({
|
|
label: color,
|
|
chip: color,
|
|
slot: 'chip',
|
|
type: 'checkbox',
|
|
checked: appConfig.ui.colors.neutral === color,
|
|
onSelect: (e) => {
|
|
e.preventDefault()
|
|
appConfig.ui.colors.neutral = color
|
|
}
|
|
}))
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: 'Appearance',
|
|
icon: 'i-lucide-sun-moon',
|
|
children: [
|
|
{
|
|
label: 'Light',
|
|
icon: 'i-lucide-sun',
|
|
type: 'checkbox',
|
|
checked: colorMode.value === 'light',
|
|
onSelect(e: Event) {
|
|
e.preventDefault()
|
|
colorMode.preference = 'light'
|
|
}
|
|
},
|
|
{
|
|
label: '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: 'Log out',
|
|
icon: 'i-lucide-log-out',
|
|
async onSelect(e: Event) {
|
|
e.preventDefault()
|
|
signOut()
|
|
}
|
|
}
|
|
]
|
|
])
|
|
</script>
|