init

NautilusDeskTimeFrontend/app/components/Menus/LocationsMenu.vue

@@ -0,0 +1,44 @@
+<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>