hook up all nav buttons, add dropdown menu, add routes...

14 files changed, 116 insertions, 23 deletions

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 1c6f639c..9f73adbf 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -4,26 +4,65 @@
 	import { user } from '$lib/store';
 	import { goto } from '$app/navigation';
 	import { Icon } from '$comp';
+
+	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-[20vh] 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
-			>
+				><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>
-		<button class="bg-white p-2 rounded-full  w-12 h-12"
-			><Icon icon="clock" style="mx-auto" /></button
-		>
 		<a href={`/${$user.username}`}>
 			<button class="bg-white p-2 rounded-full  w-12 h-12"
-				><Icon icon="profile" style="mx-auto" /></button
-			>
+				><Icon icon="profile" style="mx-auto" />
+			</button>
 		</a>
-		<button class="bg-white p-2 rounded-full  w-12 h-12"
-			><Icon icon="menu" style="mx-auto" /></button
-		>
+		<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>
 	</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"
@@ -31,3 +70,9 @@
 		<Icon icon="logo-symbol-white" style="mx-auto" />
 	</div>
 </header>
+
+<style>
+	.z {
+		z-index: 100;
+	}
+</style>
diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte
index 4da9a17e..927c8749 100644
--- a/src/components/LandingHeader.svelte
+++ b/src/components/LandingHeader.svelte
@@ -2,6 +2,7 @@
 	import { goto } from '$app/navigation';
 	import { scroll } from '$lib/utils';
 	import { Icon } from '$comp';
+	import { user } from '$lib/store';
 
 	export let howItWorks;
 	export let faq;
@@ -17,15 +18,24 @@
 			<button on:click={() => scroll(howItWorks)}>How It Works</button>
 			<button on:click={() => scroll(faq)}>FAQ</button>
 			<button>About</button>
-			<button class="border rounded-full px-6 py-2 font-bold" on:click={() => goto('/register')}
-				>Start in Seconds</button
-			>
-			<button
-				class="bg-black text-white border rounded-full px-6 py-2 font-bold"
-				on:click={() => goto('/login')}
-			>
-				Sign in
-			</button>
+			{#if !$user}
+				<button class="border rounded-full px-6 py-2 font-bold" on:click={() => goto('/register')}
+					>Start in Seconds</button
+				>
+				<button
+					class="bg-black text-white border rounded-full px-6 py-2 font-bold"
+					on:click={() => goto('/login')}
+				>
+					Sign in
+				</button>
+			{:else}
+				<button
+					class="bg-black text-white border rounded-full px-6 py-2 font-bold"
+					on:click={() => goto('/logout')}
+				>
+					Sign out
+				</button>
+			{/if}
 		</div>
 	</nav>
 </header>
diff --git a/src/lib/socket.js b/src/lib/socket.js
index 36d41ea8..c7c541e1 100644
--- a/src/lib/socket.js
+++ b/src/lib/socket.js
@@ -18,7 +18,7 @@ export const messages = (data) => ({
 	},
 
 	payment() {
-		console.log(data);
+		console.log(data, 'payment');
 	},
 
 	connected: auth,
diff --git a/src/routes/[username]/customers.svelte b/src/routes/[username]/customers.svelte
new file mode 100644
index 00000000..1935b156
--- /dev/null
+++ b/src/routes/[username]/customers.svelte
@@ -0,0 +1,5 @@
+<script>
+	import { AppHeader } from '$comp';
+</script>
+
+<AppHeader />
diff --git a/src/routes/[username]/dashboard.svelte b/src/routes/[username]/dashboard.svelte
new file mode 100644
index 00000000..1935b156
--- /dev/null
+++ b/src/routes/[username]/dashboard.svelte
@@ -0,0 +1,5 @@
+<script>
+	import { AppHeader } from '$comp';
+</script>
+
+<AppHeader />
diff --git a/src/routes/[username]/settings.svelte b/src/routes/[username]/settings.svelte
new file mode 100644
index 00000000..1935b156
--- /dev/null
+++ b/src/routes/[username]/settings.svelte
@@ -0,0 +1,5 @@
+<script>
+	import { AppHeader } from '$comp';
+</script>
+
+<AppHeader />
diff --git a/src/routes/[username]/support.svelte b/src/routes/[username]/support.svelte
new file mode 100644
index 00000000..1935b156
--- /dev/null
+++ b/src/routes/[username]/support.svelte
@@ -0,0 +1,5 @@
+<script>
+	import { AppHeader } from '$comp';
+</script>
+
+<AppHeader />
diff --git a/src/routes/[username]/transactions.svelte b/src/routes/[username]/transactions.svelte
new file mode 100644
index 00000000..1935b156
--- /dev/null
+++ b/src/routes/[username]/transactions.svelte
@@ -0,0 +1,5 @@
+<script>
+	import { AppHeader } from '$comp';
+</script>
+
+<AppHeader />
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index d26ccfed..736f38e8 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -18,7 +18,7 @@
 		if (protectedRoutes.find((p) => $page.url.pathname.match(p))) {
 			if (!$token) {
 				goto('/login');
-				toast.push('Please login to continue.');
+				toast.push('Please sign in to continue.');
 			}
 			user.subscribe((u) => (ready = true));
 		} else {
diff --git a/static/icons/customers.svg b/static/icons/customers.svg
new file mode 100644
index 00000000..0b6081ba
--- /dev/null
+++ b/static/icons/customers.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 4.35418C12.7329 3.52375 13.8053 3 15 3C17.2091 3 19 4.79086 19 7C19 9.20914 17.2091 11 15 11C13.8053 11 12.7329 10.4762 12 9.64582M15 21H3V20C3 16.6863 5.68629 14 9 14C12.3137 14 15 16.6863 15 20V21ZM15 21H21V20C21 16.6863 18.3137 14 15 14C13.9071 14 12.8825 14.2922 12 14.8027M13 7C13 9.20914 11.2091 11 9 11C6.79086 11 5 9.20914 5 7C5 4.79086 6.79086 3 9 3C11.2091 3 13 4.79086 13 7Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/static/icons/dash.svg b/static/icons/dash.svg
new file mode 100644
index 00000000..acb39ab9
--- /dev/null
+++ b/static/icons/dash.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 19V13C9 11.8954 8.10457 11 7 11H5C3.89543 11 3 11.8954 3 13V19C3 20.1046 3.89543 21 5 21H7C8.10457 21 9 20.1046 9 19ZM9 19V9C9 7.89543 9.89543 7 11 7H13C14.1046 7 15 7.89543 15 9V19M9 19C9 20.1046 9.89543 21 11 21H13C14.1046 21 15 20.1046 15 19M15 19V5C15 3.89543 15.8954 3 17 3H19C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H17C15.8954 21 15 20.1046 15 19Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/static/icons/logout.svg b/static/icons/logout.svg
index 495d6574..a614cfc0 100644
--- a/static/icons/logout.svg
+++ b/static/icons/logout.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg"  width="26" height="26" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 16L21 12M21 12L17 8M21 12L7 12M13 16V17C13 18.6569 11.6569 20 10 20H6C4.34315 20 3 18.6569 3 17V7C3 5.34315 4.34315 4 6 4H10C11.6569 4 13 5.34315 13 7V8" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/static/icons/settings.svg b/static/icons/settings.svg
new file mode 100644
index 00000000..2fac5bea
--- /dev/null
+++ b/static/icons/settings.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.3246 4.31731C10.751 2.5609 13.249 2.5609 13.6754 4.31731C13.9508 5.45193 15.2507 5.99038 16.2478 5.38285C17.7913 4.44239 19.5576 6.2087 18.6172 7.75218C18.0096 8.74925 18.5481 10.0492 19.6827 10.3246C21.4391 10.751 21.4391 13.249 19.6827 13.6754C18.5481 13.9508 18.0096 15.2507 18.6172 16.2478C19.5576 17.7913 17.7913 19.5576 16.2478 18.6172C15.2507 18.0096 13.9508 18.5481 13.6754 19.6827C13.249 21.4391 10.751 21.4391 10.3246 19.6827C10.0492 18.5481 8.74926 18.0096 7.75219 18.6172C6.2087 19.5576 4.44239 17.7913 5.38285 16.2478C5.99038 15.2507 5.45193 13.9508 4.31731 13.6754C2.5609 13.249 2.5609 10.751 4.31731 10.3246C5.45193 10.0492 5.99037 8.74926 5.38285 7.75218C4.44239 6.2087 6.2087 4.44239 7.75219 5.38285C8.74926 5.99037 10.0492 5.45193 10.3246 4.31731Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/static/icons/support.svg b/static/icons/support.svg
new file mode 100644
index 00000000..47b935b5
--- /dev/null
+++ b/static/icons/support.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 8H17M7 12H11M12 20L8 16H5C3.89543 16 3 15.1046 3 14V6C3 4.89543 3.89543 4 5 4H19C20.1046 4 21 4.89543 21 6V14C21 15.1046 20.1046 16 19 16H16L12 20Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>