mirror of
https://github.com/maxdorninger/MediaManager.git
synced 2026-04-20 00:53:30 +02:00
72 lines
2.4 KiB
Svelte
72 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import ChevronsUpDown from '@lucide/svelte/icons/chevrons-up-down';
|
|
import LogOut from '@lucide/svelte/icons/log-out';
|
|
|
|
import * as Avatar from '$lib/components/ui/avatar/index.js';
|
|
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 UserDetails from './user-details.svelte';
|
|
import UserRound from '@lucide/svelte/icons/user-round';
|
|
import { handleLogout } from '$lib/utils.ts';
|
|
import { goto } from '$app/navigation';
|
|
import { base } from '$app/paths';
|
|
const sidebar = useSidebar();
|
|
</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"
|
|
>
|
|
<Avatar.Root class="h-8 w-8 rounded-lg">
|
|
<!--<Avatar.Image src={user.avatar} alt={user.name} />-->
|
|
<Avatar.Fallback class="rounded-lg">
|
|
<UserRound />
|
|
</Avatar.Fallback>
|
|
</Avatar.Root>
|
|
<div class="grid flex-1 text-left text-sm leading-tight">
|
|
<UserDetails />
|
|
</div>
|
|
<ChevronsUpDown class="ml-auto size-4" />
|
|
</Sidebar.MenuButton>
|
|
{/snippet}
|
|
</DropdownMenu.Trigger>
|
|
<DropdownMenu.Content
|
|
align="end"
|
|
class="w-[var(--bits-dropdown-menu-anchor-width)] min-w-56 rounded-lg"
|
|
side={sidebar.isMobile ? 'bottom' : 'right'}
|
|
sideOffset={4}
|
|
>
|
|
<DropdownMenu.Label class="p-0 font-normal">
|
|
<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
|
|
<Avatar.Root class="h-8 w-8 rounded-lg">
|
|
<!--<Avatar.Image src={user.avatar} alt={user.name} />-->
|
|
<Avatar.Fallback class="rounded-lg">
|
|
<UserRound />
|
|
</Avatar.Fallback>
|
|
</Avatar.Root>
|
|
<div class="grid flex-1 text-left text-sm leading-tight">
|
|
<UserDetails />
|
|
</div>
|
|
</div>
|
|
</DropdownMenu.Label>
|
|
<DropdownMenu.Separator />
|
|
<DropdownMenu.Item onclick={() => goto(base + '/dashboard/settings#me')}>
|
|
My Account
|
|
</DropdownMenu.Item>
|
|
<DropdownMenu.Separator />
|
|
<DropdownMenu.Item onclick={() => handleLogout()}>
|
|
<LogOut />
|
|
Log out
|
|
</DropdownMenu.Item>
|
|
</DropdownMenu.Content>
|
|
</DropdownMenu.Root>
|
|
</Sidebar.MenuItem>
|
|
</Sidebar.Menu>
|