81 lines
2.5 KiB
Svelte
81 lines
2.5 KiB
Svelte
<script lang="ts">
|
|
import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
|
|
import * as Sidebar from "$lib/components/ui/sidebar/index.js";
|
|
import { useSidebar } from "$lib/components/ui/sidebar/index.js";
|
|
import ChevronsUpDown from "@lucide/svelte/icons/chevrons-up-down";
|
|
import Plus from "@lucide/svelte/icons/plus";
|
|
|
|
// This should be `Component` after @lucide/svelte updates types
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
let { teams }: { teams: { name: string; logo: any; plan: string }[] } =
|
|
$props();
|
|
const sidebar = useSidebar();
|
|
|
|
let activeTeam = $state(teams[0]);
|
|
</script>
|
|
|
|
<Sidebar.Menu>
|
|
<Sidebar.MenuItem>
|
|
<DropdownMenu.Root>
|
|
<DropdownMenu.Trigger>
|
|
{#snippet child({ props })}
|
|
<Sidebar.MenuButton
|
|
{...props}
|
|
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"
|
|
>
|
|
<activeTeam.logo class="size-4" />
|
|
</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>
|
|
<ChevronsUpDown class="ml-auto" />
|
|
</Sidebar.MenuButton>
|
|
{/snippet}
|
|
</DropdownMenu.Trigger>
|
|
<DropdownMenu.Content
|
|
class="w-[var(--bits-dropdown-menu-anchor-width)] min-w-56 rounded-lg"
|
|
align="start"
|
|
side={sidebar.isMobile ? "bottom" : "right"}
|
|
sideOffset={4}
|
|
>
|
|
<DropdownMenu.Label class="text-muted-foreground text-xs"
|
|
>Teams</DropdownMenu.Label
|
|
>
|
|
{#each teams as team, index (team.name)}
|
|
<DropdownMenu.Item
|
|
onSelect={() => (activeTeam = team)}
|
|
class="gap-2 p-2"
|
|
>
|
|
<div
|
|
class="flex size-6 items-center justify-center rounded-sm border"
|
|
>
|
|
<team.logo class="size-4 shrink-0" />
|
|
</div>
|
|
{team.name}
|
|
>
|
|
</DropdownMenu.Item>
|
|
{/each}
|
|
<DropdownMenu.Separator />
|
|
<DropdownMenu.Item class="gap-2 p-2">
|
|
<div
|
|
class="bg-background flex size-6 items-center justify-center rounded-md border"
|
|
>
|
|
<Plus class="size-4" />
|
|
</div>
|
|
<div class="text-muted-foreground font-medium">
|
|
Coming soon
|
|
</div>
|
|
</DropdownMenu.Item>
|
|
</DropdownMenu.Content>
|
|
</DropdownMenu.Root>
|
|
</Sidebar.MenuItem>
|
|
</Sidebar.Menu>
|