41 lines
1.1 KiB
Vue
41 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
teams: {
|
|
name: string
|
|
logo: string
|
|
plan: string
|
|
}[]
|
|
}>()
|
|
|
|
const activeTeam = ref(props.teams[0])
|
|
</script>
|
|
|
|
<template>
|
|
<SidebarMenu>
|
|
<SidebarMenuItem>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger as-child>
|
|
<SidebarMenuButton
|
|
size="lg"
|
|
class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
|
|
>
|
|
<div
|
|
class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg"
|
|
>
|
|
<img :src="activeTeam.logo" class="h-full w-full" />
|
|
</div>
|
|
<div class="grid flex-1 text-left text-sm leading-tight">
|
|
<span class="truncate font-semibold">
|
|
{{ activeTeam.name }}
|
|
</span>
|
|
<span class="truncate text-xs">{{ activeTeam.plan }}</span>
|
|
</div>
|
|
</SidebarMenuButton>
|
|
</DropdownMenuTrigger>
|
|
</DropdownMenu>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</template>
|
|
|
|
<style scoped></style>
|