diff options
Diffstat (limited to 'src/components/AppHeader.svelte')
| -rw-r--r-- | src/components/AppHeader.svelte | 69 |
1 files changed, 43 insertions, 26 deletions
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte index 242e6924..9ebf28bf 100644 --- a/src/components/AppHeader.svelte +++ b/src/components/AppHeader.svelte @@ -1,14 +1,15 @@ <script> // we will want to dynamically use the users avatar on this screen if they have uploaded one - import { user } from '$lib/store'; + import OutClick from 'svelte-outclick'; + import { user, newPayment, colorTheme } from '$lib/store'; import { goto } from '$app/navigation'; import { Icon, LocaleSelector } from '$comp'; export let avatarPosition = 'left-[calc(50vw-48px)]'; const menuButtons = [ - { title: 'Customers', icon: 'customers', goto: 'customers' }, + // { title: 'Customers', icon: 'customers', goto: 'customers' }, { title: 'Dashboard', icon: 'dash', goto: 'dashboard' }, { title: 'Settings', icon: 'settings', goto: 'settings' }, { title: 'Support', icon: 'support', goto: 'support' }, @@ -21,12 +22,13 @@ if (item === 'logout') { goto('/logout'); } else { + showMenu = false; goto(`/${$user.username + '/' + item}`); } }; </script> -<header class="bg-gradient-to-r from-primary to-gradient h-[175px] w-full relative"> +<header class="bg-gradient-to-r {$colorTheme} h-[175px] w-full relative"> <nav class="flex justify-end items-center space-x-4 p-5"> <LocaleSelector /> {#if $user} @@ -36,36 +38,51 @@ </button> </a> <a href={`/${$user.username}/transactions`}> - <button class="bg-white p-2 rounded-full w-12 h-12" + <button class="bg-white p-2 rounded-full w-12 h-12 relative" ><Icon icon="clock" style="mx-auto" /> + {#if $newPayment} + <span class="absolute top-0 right-0"> + <span class="flex h-3 w-3"> + <span + class="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#F7931A] opacity-75" + /> + <span class="relative inline-flex rounded-full h-3 w-3 bg-[#F7931A]" /> + </span> + </span> + {/if} </button> </a> <a href={`/${$user.username}`}> - <button class="bg-white p-2 rounded-full w-12 h-12" + <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> + <OutClick on:outclick={() => (showMenu = false)}> + <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> + </OutClick> </div> {:else} <a href="/login"> @@ -75,7 +92,7 @@ >>>>>>> master </nav> <div - 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" + class="absolute top-[calc(175px-48px)] {avatarPosition} rounded-full border-4 border-white p-4 bg-gradient-to-r {$colorTheme} w-24 h-24" > <Icon icon="logo-symbol-white" style="mx-auto" /> </div> |