45 lines
1.1 KiB
Vue
45 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import type { DropdownMenuItem } from '@nuxt/ui'
|
|
|
|
defineProps<{
|
|
collapsed?: boolean
|
|
}>()
|
|
|
|
const locations = ref([{
|
|
label: 'Xanten',
|
|
avatar: {
|
|
alt: 'Xanten'
|
|
}
|
|
},
|
|
{
|
|
label: 'Bonn',
|
|
avatar: {
|
|
alt: 'Bonn'
|
|
}
|
|
},])
|
|
const selectedTeam = ref(locations.value[0])
|
|
|
|
const items = computed<DropdownMenuItem[][]>(() => {
|
|
return [locations.value.map(team => ({
|
|
...team,
|
|
onSelect() {
|
|
selectedTeam.value = team
|
|
}
|
|
})),]
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<UDropdownMenu :items="items" :content="{ align: 'center', collisionPadding: 12 }"
|
|
:ui="{ content: collapsed ? 'w-40' : 'w-(--reka-dropdown-menu-trigger-width)' }">
|
|
<UButton v-bind="{
|
|
...selectedTeam,
|
|
label: collapsed ? undefined : selectedTeam?.label,
|
|
trailingIcon: collapsed ? undefined : 'i-lucide-chevrons-up-down'
|
|
}" color="neutral" variant="ghost" block :square="collapsed" class="data-[state=open]:bg-elevated"
|
|
:class="[!collapsed && 'py-2']" :ui="{
|
|
trailingIcon: 'text-dimmed'
|
|
}" />
|
|
</UDropdownMenu>
|
|
</template>
|