mirror of
https://github.com/maxdorninger/MediaManager.git
synced 2026-04-22 05:45:20 +02:00
99 lines
3.1 KiB
Svelte
99 lines
3.1 KiB
Svelte
<script lang="ts">
|
|
import BadgeCheck from '@lucide/svelte/icons/badge-check';
|
|
import Bell from '@lucide/svelte/icons/bell';
|
|
import ChevronsUpDown from '@lucide/svelte/icons/chevrons-up-down';
|
|
import CreditCard from '@lucide/svelte/icons/credit-card';
|
|
import LogOut from '@lucide/svelte/icons/log-out';
|
|
import Sparkles from '@lucide/svelte/icons/sparkles';
|
|
|
|
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 {getContext} from 'svelte';
|
|
import UserDetails from './user-details.svelte';
|
|
import type {User} from '$lib/types';
|
|
import UserRound from '@lucide/svelte/icons/user-round';
|
|
import {base} from '$app/paths';
|
|
import {env} from "$env/dynamic/public";
|
|
import {goto} from '$app/navigation';
|
|
import {handleLogout} from '$lib/utils.ts';
|
|
const user: () => User = getContext('user');
|
|
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.Group>
|
|
<DropdownMenu.Item>
|
|
<Sparkles/>
|
|
Upgrade to Pro
|
|
</DropdownMenu.Item>
|
|
</DropdownMenu.Group>
|
|
<DropdownMenu.Separator/>
|
|
<DropdownMenu.Group>
|
|
<DropdownMenu.Item>
|
|
<BadgeCheck/>
|
|
Account
|
|
</DropdownMenu.Item>
|
|
<DropdownMenu.Item>
|
|
<CreditCard/>
|
|
Billing
|
|
</DropdownMenu.Item>
|
|
<DropdownMenu.Item>
|
|
<Bell/>
|
|
Notifications
|
|
</DropdownMenu.Item>
|
|
</DropdownMenu.Group>
|
|
<DropdownMenu.Separator/>
|
|
<DropdownMenu.Item onclick={() => handleLogout()}>
|
|
<LogOut/>
|
|
Log out
|
|
</DropdownMenu.Item>
|
|
</DropdownMenu.Content>
|
|
</DropdownMenu.Root>
|
|
</Sidebar.MenuItem>
|
|
</Sidebar.Menu>
|