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
|
<script>
// we will want to dynamically use the users avatar on this screen if they have uploaded one
import { user } 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 {
goto(`/${$user.username + '/' + item}`);
}
};
</script>
<header class="bg-gradient-to-r from-primary to-gradient 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"
><Icon icon="clock" style="mx-auto" />
</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">
<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>
</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 from-primary to-gradient w-24 h-24"
>
<Icon icon="logo-symbol-white" style="mx-auto" />
</div>
</header>
<style>
.z {
z-index: 100;
}
</style>
|
