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
|
<script>
// we will want to dynamically use the users avatar on this screen if they have uploaded one
import OutClick from 'svelte-outclick';
import { user, newPayment, colorTheme } from '$lib/store';
import { goto } from '$app/navigation';
import { Icon } from '$comp';
export let avatarPosition = 'left-[calc(50vw-48px)]';
const menuButtons = [
// { title: 'Customers', icon: 'customers', goto: 'customers' },
{ title: 'Dashboard', icon: 'dash', goto: 'dashboard' },
{ title: 'Settings', icon: 'settings', goto: 'settings' },
{ title: 'Support', icon: 'support', goto: 'support' },
{ title: 'Sign out', icon: 'logout', goto: 'logout' }
];
let showMenu = false;
const handleMenuItemClick = (item) => {
if (item === 'logout') {
goto('/logout');
} else {
showMenu = false;
goto(`/${$user.username + '/' + item}`);
}
};
</script>
<header class="bg-gradient-to-r {$colorTheme} h-[175px] w-full relative">
<nav class="flex justify-end items-center space-x-4 p-5">
{#if $user}
<a href={`/${$user.username}/receive`}>
<button class="bg-white p-2 rounded-full w-12 h-12"
><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 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>
<a href={`/${$user.username}`}>
<button class="bg-white p-2 rounded-full w-12 h-12"
><Icon icon="profile" style="mx-auto" />
</button>
</a>
<div class="relative">
<OutClick on:outclick={() => (showMenu = false)}>
<button
class="bg-white p-2 rounded-full w-12 h-12"
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 button}
<li>
<button
class="flex justify-center items-center font-semibold text-sm"
on:click={() => handleMenuItemClick(button.goto)}
><Icon icon={button.icon} style="mr-1" /> {button.title}
</button>
</li>
{/each}
</ul>
</div>
</OutClick>
</div>
{:else}
<a href="/login">
<button class="bg-white px-5 py-2 rounded-xl font-semibold text-sm">Sign in </button>
</a>
{/if}
</nav>
<div
class="absolute top-[calc(175px-48px)] {avatarPosition} rounded-full border-4 border-white p-4 bg-gradient-to-r {$colorTheme} w-24 h-24"
>
<Icon icon="logo-symbol-white" style="mx-auto" />
</div>
</header>
<style>
.z {
z-index: 100;
}
</style>
|
