1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
<script>
import OutClick from 'svelte-outclick';
import { newPayment, colorTheme, tempProfileFiles } from '$lib/store';
import { goto } from '$app/navigation';
import { Avatar, Icon } from '$comp';
import { t } from '$lib/translations';
import { page } from '$app/stores';
export let data;
let { subject, user } = data;
$: update(data);
let update = (data) => ({ subject, user } = data);
let menuButtons;
if (user)
menuButtons = [
{ key: 'nav.profile', icon: 'profile', href: `/${user.username}` },
{ key: 'nav.settings', icon: 'settings', href: `/${user.username}/settings` },
{ key: 'nav.support', icon: 'support', href: `/${user.username}/support` },
{ key: 'nav.signOut', icon: 'logout', href: `/logout` }
];
let showMenu = false;
$: bg =
$tempProfileFiles && $tempProfileFiles.banner
? `url(${$tempProfileFiles.banner})`
: subject?.banner
? `url(/api/public/${subject.username}-banner.webp)`
: undefined;
</script>
<header
class="bg-gradient-to-r {$colorTheme} h-[175px] w-full relative bg-cover"
style:background-image={bg}
>
<nav class="flex justify-end items-center space-x-4 p-5">
{#if user}
<a href={`/${user.username}/dashboard`}>
<button
class="bg-white p-2 rounded-full w-12 h-12 drop-shadow-xl border border-black/10 {$page
.url.pathname === `/${user.username}/dashboard`
? 'opacity-100'
: 'opacity-70 hover:opacity-80'}"
><Icon icon="home" style="mx-auto w-6" />
</button>
</a>
<a href={`/${user.username}/receive`}>
<button
class="bg-white p-2 rounded-full w-12 h-12 drop-shadow-xl border border-black/10 {$page
.url.pathname === `/${user.username}/receive`
? 'opacity-100'
: 'opacity-70 hover:opacity-80'}"
><Icon icon="numpad" style="mx-auto" />
</button>
</a>
<a href={`/${user.username}/transactions`}>
<button
class="bg-white p-2 rounded-full w-12 h-12 drop-shadow-xl border border-black/10 {$page
.url.pathname === `/${user.username}/transactions`
? 'opacity-100'
: 'opacity-70 hover:opacity-80'} relative"
><Icon icon="clock" style="mx-auto" />
{#if $newPayment}
<span class="absolute top-0 right-0">
<span class="flex h-3 w-3">
<span
class="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#F7931A] opacity-75"
/>
<span class="relative inline-flex rounded-full h-3 w-3 bg-[#F7931A]" />
</span>
</span>
{/if}
</button>
</a>
<div class="relative">
<OutClick on:outclick={() => (showMenu = false)}>
<button
class="bg-white p-2 rounded-full w-12 h-12 drop-shadow-xl border border-black/10 {$page
.url.pathname === `/${user.username}` ||
$page.url.pathname === `/${user.username}/settings` ||
$page.url.pathname === `/${user.username}/support`
? 'opacity-100'
: `opacity-70 hover:opacity-80 ${showMenu ? 'opacity-80' : ''}`}"
on:click={() => (showMenu = !showMenu)}
><Icon icon="menu" style="mx-auto" />
</button>
<div
class="{showMenu
? 'block'
: 'hidden'} absolute top-14 right-0 bg-white rounded-3xl p-8 shadow-xl z"
>
<ul class="space-y-5 w-32">
{#each menuButtons as { href, icon, key }}
<li>
<a {href}>
<button
class="flex justify-center items-center font-semibold text-sm hover:opacity-80"
><Icon {icon} style="mr-1" /> {$t(key)}
</button>
</a>
</li>
{/each}
</ul>
</div>
</OutClick>
</div>
{:else}
<a href="/login">
<button class="bg-white px-5 py-2 rounded-xl font-semibold text-sm"
>{$t('nav.signIn')}</button
>
</a>
{/if}
</nav>
<div class="absolute md:w-[64px] md:mx-auto left-[calc(50vw-64px)] -bottom-[64px]">
<Avatar user={subject} />
</div>
</header>
<style>
.z {
z-index: 100;
}
</style>
|
