From 2bca310acc4ca22960c5902b402c2ae23d0f7755 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Sat, 30 Jul 2022 18:58:25 -0600
Subject: hook up all nav buttons, add dropdown menu, add routes...

---
 src/components/AppHeader.svelte           | 65 ++++++++++++++++++++++++++-----
 src/components/LandingHeader.svelte       | 28 ++++++++-----
 src/lib/socket.js                         |  2 +-
 src/routes/[username]/customers.svelte    |  5 +++
 src/routes/[username]/dashboard.svelte    |  5 +++
 src/routes/[username]/settings.svelte     |  5 +++
 src/routes/[username]/support.svelte      |  5 +++
 src/routes/[username]/transactions.svelte |  5 +++
 src/routes/__layout.svelte                |  2 +-
 9 files changed, 101 insertions(+), 21 deletions(-)
 create mode 100644 src/routes/[username]/customers.svelte
 create mode 100644 src/routes/[username]/dashboard.svelte
 create mode 100644 src/routes/[username]/settings.svelte
 create mode 100644 src/routes/[username]/support.svelte
 create mode 100644 src/routes/[username]/transactions.svelte

(limited to 'src')

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 {
-- 
cgit v1.2.3