From 27cbd543cece74228680d74f276eca89e13b557b Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Sat, 30 Jul 2022 20:45:19 -0600
Subject: add user public page

---
 src/components/AppHeader.svelte | 84 ++++++++++++++++++++++-------------------
 1 file changed, 46 insertions(+), 38 deletions(-)

(limited to 'src/components')

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 9f73adbf..d0123650 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -5,6 +5,8 @@
 	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' },
@@ -24,48 +26,54 @@
 	};
 </script>
 
-<header class="bg-gradient-to-r from-primary to-gradient h-[20vh] w-full relative">
+<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">
-		<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>
+		{#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>
-		</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(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"
+		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>
-- 
cgit v1.2.3