aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/AppHeader.svelte
blob: bbe2e05e135974cb3d5604148a58a45741235e8f (plain) (blame)
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
<script>
	// we will want to dynamically use the users avatar on this screen if they have uploaded one

	import { goto } from '$app/navigation';
	import { Icon } from '$comp';
</script>

<header class="bg-gradient-to-r from-primary to-gradient h-[20vh] w-full relative">
	<nav class="flex justify-end items-center space-x-4 p-5">
		<button class="bg-white p-2 rounded-full w-12 h-12" on:click={() => goto('/receive')}
			><Icon icon="numpad" style="mx-auto" /></button
		>
		<button class="bg-white p-2 rounded-full  w-12 h-12"
			><Icon icon="clock" style="mx-auto" /></button
		>
		<button class="bg-white p-2 rounded-full  w-12 h-12"
			><Icon icon="profile" style="mx-auto" /></button
		>
		<button class="bg-white p-2 rounded-full  w-12 h-12"
			><Icon icon="menu" style="mx-auto" /></button
		>
	</nav>
	<div
		class="absolute top-[calc(20vh-48px)] left-[calc(50vw-48px)] 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>