peer-at-code-web/src/lib/components/layout/navbar/navbar-user.svelte

92 lines
3 KiB
Svelte

<script lang="ts">
import { page } from '$app/stores';
import Boring from 'svelte-boring-avatars';
import Award from 'lucide-svelte/icons/award';
import Github from 'lucide-svelte/icons/github';
import LifeBuoy from 'lucide-svelte/icons/life-buoy';
import LogOut from 'lucide-svelte/icons/log-out';
import Settings from 'lucide-svelte/icons/settings';
import Users from 'lucide-svelte/icons/users';
import Shield from 'lucide-svelte/icons/shield';
import ScrollText from 'lucide-svelte/icons/scroll-text';
import Code from 'lucide-svelte/icons/code';
import * as Avatar from '$lib/components/ui/avatar';
import { Button } from '$lib/components/ui/button';
import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
</script>
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder>
<Button builders={[builder]} variant="plain" size="icon">
<Avatar.Root>
<Avatar.Image
src="data:image;base64,{$page.data.user?.avatar}"
alt={$page.data.user?.pseudo}
/>
<Avatar.Fallback>
<Boring name={$page.data.user?.pseudo} variant="beam" />
</Avatar.Fallback>
</Avatar.Root>
<span class="sr-only">Menu utilisateur</span>
</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content class="w-56">
<DropdownMenu.Label
>Salutation, <span class="text-primary">{$page.data.user?.pseudo}</span></DropdownMenu.Label
>
{#if $page.data.user?.email.endsWith('@peerat.dev')}
<DropdownMenu.Separator />
<DropdownMenu.Sub>
<DropdownMenu.SubTrigger>
<Shield class="mr-2 h-4 w-4" />
<span>Administration</span>
</DropdownMenu.SubTrigger>
<DropdownMenu.SubContent>
<DropdownMenu.Item href="/admin/logs">
<ScrollText class="mr-2 h-4 w-4" />
<span>Logs</span>
</DropdownMenu.Item>
<DropdownMenu.Item href="/admin/chapters">
<Code class="mr-2 h-4 w-4" />
<span>Chapitres</span>
</DropdownMenu.Item>
<DropdownMenu.Item href="/admin/puzzles">
<Code class="mr-2 h-4 w-4" />
<span>Puzzles</span>
</DropdownMenu.Item>
</DropdownMenu.SubContent>
</DropdownMenu.Sub>
{/if}
<DropdownMenu.Separator />
<DropdownMenu.Item href="/settings">
<Settings class="mr-2 h-4 w-4" />
<span>Paramètres</span>
</DropdownMenu.Item>
<DropdownMenu.Separator />
<DropdownMenu.Item href="/badges">
<Award class="mr-2 h-4 w-4" />
<span>Mes badges</span>
</DropdownMenu.Item>
<!-- <DropdownMenu.Item href="/groups">
<Users class="mr-2 h-4 w-4" />
<span>Mes équipes</span>
</DropdownMenu.Item> -->
<DropdownMenu.Separator />
<DropdownMenu.Item href="/git" target="_blank">
<Github class="mr-2 h-4 w-4" />
<span>GitHub</span>
</DropdownMenu.Item>
<DropdownMenu.Item href="/discord" target="_blank">
<LifeBuoy class="mr-2 h-4 w-4" />
<span>Discord</span>
</DropdownMenu.Item>
<DropdownMenu.Separator />
<DropdownMenu.Item href="/logout" class="text-destructive data-[highlighted]:bg-destructive">
<LogOut class="mr-2 h-4 w-4" />
Se déconnecter
</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>