From 01a1bb630e6e29b60a9f20671287913a3993e256 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Fri, 16 Sep 2022 23:34:58 -0600
Subject: add loading state to invoice button, improve nav button states/styles

---
 src/components/AppHeader.svelte | 26 ++++++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

(limited to 'src/components')

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index cd3dfd30..22c18622 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -4,6 +4,7 @@
 	import { goto } from '$app/navigation';
 	import { Icon } from '$comp';
 	import { t } from '$lib/translations';
+	import { page } from '$app/stores';
 
 	export let avatarPosition = 'left-[calc(50vw-48px)] bottom-[-48px]';
 
@@ -37,12 +38,20 @@
 	<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 shadow-xl"
+				<button
+					class="bg-white p-2 rounded-full w-12 h-12 drop-shadow-xl border border-black/10 {$page
+						.url.pathname === `/${$user.username}/receive`
+						? 'opacity-100'
+						: 'opacity-70'}"
 					><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 shadow-xl relative"
+				<button
+					class="bg-white p-2 rounded-full w-12 h-12 drop-shadow-xl border border-black/10 {$page
+						.url.pathname === `/${$user.username}/transactions`
+						? 'opacity-100'
+						: 'opacity-70'} relative"
 					><Icon icon="clock" style="mx-auto" />
 					{#if $newPayment}
 						<span class="absolute top-0 right-0">
@@ -57,14 +66,23 @@
 				</button>
 			</a>
 			<a href={`/${$user.username}`}>
-				<button class="bg-white p-2 rounded-full w-12 h-12 shadow-xl"
+				<button
+					class="bg-white p-2 rounded-full w-12 h-12 drop-shadow-xl border border-black/10 {$page
+						.url.pathname === `/${$user.username}`
+						? 'opacity-100'
+						: 'opacity-70'}"
 					><Icon icon="profile" style="mx-auto" />
 				</button>
 			</a>
 			<div class="relative">
 				<OutClick on:outclick={() => (showMenu = false)}>
 					<button
-						class="bg-white p-2 rounded-full w-12 h-12 shadow-xl"
+						class="bg-white p-2 rounded-full w-12 h-12 drop-shadow-xl border border-black/10 {$page
+							.url.pathname === `/${$user.username}/dashboard` ||
+						$page.url.pathname === `/${$user.username}/settings` ||
+						$page.url.pathname === `/${$user.username}/support`
+							? 'opacity-100'
+							: 'opacity-70'}"
 						on:click={() => (showMenu = !showMenu)}
 						><Icon icon="menu" style="mx-auto" />
 					</button>
-- 
cgit v1.2.3