your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import { goto } from '$app/navigation';
3 import { user, logout } from '$lib/atproto';
4 import { getHandleOrDid } from '$lib/atproto/methods';
5 import type { WebsiteData } from '$lib/types';
6 import { Avatar, Button, Popover } from '@foxui/core';
7 import CustomDomainModal, { customDomainModalState } from '$lib/website/CustomDomainModal.svelte';
8
9 let {
10 data
11 }: {
12 data: WebsiteData;
13 } = $props();
14
15 let settingsPopoverOpen = $state(false);
16</script>
17
18{#if user.isLoggedIn && user.profile}
19 <div class="fixed top-4 right-4 z-20">
20 <Popover sideOffset={8} bind:open={settingsPopoverOpen} class="bg-base-100 dark:bg-base-900">
21 {#snippet child({ props })}
22 <button {...props}>
23 <Avatar src={user.profile?.avatar} alt="" class="size-15 rounded-full" />
24 </button>
25 {/snippet}
26
27 <div class="flex flex-col">
28 {#if user.profile}
29 <Button
30 variant="ghost"
31 onclick={() => {
32 if (user.profile) goto('/' + getHandleOrDid(user.profile), {});
33 }}>Leave edit mode</Button
34 >
35 {/if}
36
37 <Button
38 variant="ghost"
39 onclick={() => {
40 settingsPopoverOpen = false;
41 customDomainModalState.show();
42 }}>Custom Domain</Button
43 >
44
45 <Button variant="ghost" onclick={logout}>Logout</Button>
46 </div>
47 </Popover>
48 </div>
49
50 <CustomDomainModal />
51{/if}