aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/LandingHeader.svelte
diff options
context:
space:
mode:
authorAdam Soltys <[email protected]>2023-12-01 20:04:13 -0800
committerAdam Soltys <[email protected]>2023-12-01 20:04:13 -0800
commit216a600224fde22ce76b367557a02094ec693886 (patch)
treed1189bbaa39db204633523132a7d4767b952717d /src/components/LandingHeader.svelte
parent7d9bc1f54dfd04172e8d6d43ebc2efd6f407e833 (diff)
downloadcoinos-ui-216a600224fde22ce76b367557a02094ec693886.tar.gz
coinos-ui-216a600224fde22ce76b367557a02094ec693886.zip
prettier
Diffstat (limited to 'src/components/LandingHeader.svelte')
-rw-r--r--src/components/LandingHeader.svelte230
1 files changed, 119 insertions, 111 deletions
diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte
index ed7907c1..556d44a3 100644
--- a/src/components/LandingHeader.svelte
+++ b/src/components/LandingHeader.svelte
@@ -1,125 +1,133 @@
<script>
- import { goto } from '$app/navigation';
- import { scroll } from '$lib/utils';
- import { Icon } from '$comp';
- import { t } from '$lib/translations';
- import { page } from '$app/stores';
+ import { goto } from "$app/navigation";
+ import { scroll } from "$lib/utils";
+ import { Icon } from "$comp";
+ import { t } from "$lib/translations";
+ import { page } from "$app/stores";
- export let howItWorks;
- export let faq;
- export let about;
- export let user;
+ export let howItWorks;
+ export let faq;
+ export let about;
+ export let user;
- let showMobileMenu = false;
- let header;
- const mobileMenuButtonClick = (section) => {
- showMobileMenu = false;
- scroll(section);
- };
+ let showMobileMenu = false;
+ let header;
+ const mobileMenuButtonClick = (section) => {
+ showMobileMenu = false;
+ scroll(section);
+ };
</script>
<header
- class="w-full lg:w-5/6 py-5 mx-auto fixed md:sticky z-10 top-0 bg-white/90"
- bind:this={header}
+ class="w-full lg:w-5/6 py-5 mx-auto fixed md:sticky z-10 top-0 bg-white/90"
+ bind:this={header}
>
- <nav class="block xl:flex flex-wrap justify-between items-center">
- <div class="flex justify-start md:justify-center items-center md:space-x-10">
- <a href="/" on:click={() => scroll(header)}>
- <Icon icon="logo" style="hidden md:block mb-5 xl:mb-0" />
- <Icon icon="logo" style="block md:hidden ml-5 w-48" />
- </a>
- </div>
+ <nav class="block xl:flex flex-wrap justify-between items-center">
+ <div
+ class="flex justify-start md:justify-center items-center md:space-x-10"
+ >
+ <a href="/" on:click={() => scroll(header)}>
+ <Icon icon="logo" style="hidden md:block mb-5 xl:mb-0" />
+ <Icon icon="logo" style="block md:hidden ml-5 w-48" />
+ </a>
+ </div>
- <!-- desktop nav -->
- <div class="hidden space-x-10 md:flex flex-wrap justify-center items-center font-bold">
- {#if $page.url.pathname === '/'}
- <button class="hover:opacity-80" on:click={() => scroll(howItWorks)}
- >{$t('howItWorks.header')}</button
- >
- <button class="hover:opacity-80" on:click={() => scroll(faq)}>{$t('faq.header')}</button>
- <button class="hover:opacity-80" on:click={() => scroll(about)}>{$t('about.header')}</button
- >
- {/if}
- {#if user}
- <button
- class="border rounded-full px-6 py-2 font-bold"
- on:click={() => goto(`/${user.username}`)}
- >Home
- </button>
- <button
- class="bg-black text-white border rounded-full px-6 py-2 font-bold"
- on:click={() => goto('/logout')}
- >
- {$t('nav.signOut')}
- </button>
- {:else}
- <button
- class="border rounded-full px-6 py-2 font-bold hover:opacity-80"
- on:click={() => goto('/register')}
- >{$t('nav.startInSeconds')}
- </button>
- <button
- class="bg-black text-white border rounded-full px-6 py-2 font-bold hover:opacity-80"
- on:click={() => goto('/login')}
- >
- {$t('nav.signIn')}
- </button>
- {/if}
- </div>
+ <!-- desktop nav -->
+ <div
+ class="hidden space-x-10 md:flex flex-wrap justify-center items-center font-bold"
+ >
+ {#if $page.url.pathname === "/"}
+ <button class="hover:opacity-80" on:click={() => scroll(howItWorks)}
+ >{$t("howItWorks.header")}</button
+ >
+ <button class="hover:opacity-80" on:click={() => scroll(faq)}
+ >{$t("faq.header")}</button
+ >
+ <button class="hover:opacity-80" on:click={() => scroll(about)}
+ >{$t("about.header")}</button
+ >
+ {/if}
+ {#if user}
+ <button
+ class="border rounded-full px-6 py-2 font-bold"
+ on:click={() => goto(`/${user.username}`)}
+ >Home
+ </button>
+ <button
+ class="bg-black text-white border rounded-full px-6 py-2 font-bold"
+ on:click={() => goto("/logout")}
+ >
+ {$t("nav.signOut")}
+ </button>
+ {:else}
+ <button
+ class="border rounded-full px-6 py-2 font-bold hover:opacity-80"
+ on:click={() => goto("/register")}
+ >{$t("nav.startInSeconds")}
+ </button>
+ <button
+ class="bg-black text-white border rounded-full px-6 py-2 font-bold hover:opacity-80"
+ on:click={() => goto("/login")}
+ >
+ {$t("nav.signIn")}
+ </button>
+ {/if}
+ </div>
- <!-- mobile nav -->
- <button
- class="block md:hidden absolute top-[34.5px] right-10 z"
- on:click={() => (showMobileMenu = !showMobileMenu)}
- ><Icon icon={!showMobileMenu ? 'menu' : 'close'} />
- </button>
+ <!-- mobile nav -->
+ <button
+ class="block md:hidden absolute top-[34.5px] right-10 z"
+ on:click={() => (showMobileMenu = !showMobileMenu)}
+ ><Icon icon={!showMobileMenu ? "menu" : "close"} />
+ </button>
- <div
- class="container w-full px-10 md:hidden absolute top-0 {showMobileMenu
- ? 'right-0'
- : 'right-[-100%]'} transition-all ease-in-out duration-300 h-[100vh] w-full bg-white"
- >
- <div class="space-y-8 mt-24 font-bold text-xl">
- <button on:click={() => mobileMenuButtonClick(howItWorks)} class="block"
- >{$t('howItWorks.header')}</button
- >
- <button on:click={() => mobileMenuButtonClick(faq)} class="block">{$t('faq.header')}</button
- >
- <button on:click={() => mobileMenuButtonClick(about)} class="block"
- >{$t('about.header')}</button
- >
- {#if !user}
- <button
- class="border rounded-full px-6 py-2 font-bold block w-full"
- on:click={() => goto('/register')}
- >{$t('nav.startInSeconds')}
- </button>
- <button
- class="bg-black text-white border rounded-full px-6 py-2 font-bold block w-full"
- on:click={() => goto('/login')}
- >
- {$t('nav.signIn')}
- </button>
- {:else}
- <button
- class="border rounded-full px-6 py-2 font-bold block"
- on:click={() => goto(`/${user.username}`)}
- >{$t('nav.account')}
- </button>
- <button
- class="bg-black text-white border rounded-full px-6 py-2 font-bold block"
- on:click={() => goto('/logout')}
- >
- {$t('nav.signOut')}
- </button>
- {/if}
- </div>
- </div>
- </nav>
+ <div
+ class="container w-full px-10 md:hidden absolute top-0 {showMobileMenu
+ ? 'right-0'
+ : 'right-[-100%]'} transition-all ease-in-out duration-300 h-[100vh] w-full bg-white"
+ >
+ <div class="space-y-8 mt-24 font-bold text-xl">
+ <button on:click={() => mobileMenuButtonClick(howItWorks)} class="block"
+ >{$t("howItWorks.header")}</button
+ >
+ <button on:click={() => mobileMenuButtonClick(faq)} class="block"
+ >{$t("faq.header")}</button
+ >
+ <button on:click={() => mobileMenuButtonClick(about)} class="block"
+ >{$t("about.header")}</button
+ >
+ {#if !user}
+ <button
+ class="border rounded-full px-6 py-2 font-bold block w-full"
+ on:click={() => goto("/register")}
+ >{$t("nav.startInSeconds")}
+ </button>
+ <button
+ class="bg-black text-white border rounded-full px-6 py-2 font-bold block w-full"
+ on:click={() => goto("/login")}
+ >
+ {$t("nav.signIn")}
+ </button>
+ {:else}
+ <button
+ class="border rounded-full px-6 py-2 font-bold block"
+ on:click={() => goto(`/${user.username}`)}
+ >{$t("nav.account")}
+ </button>
+ <button
+ class="bg-black text-white border rounded-full px-6 py-2 font-bold block"
+ on:click={() => goto("/logout")}
+ >
+ {$t("nav.signOut")}
+ </button>
+ {/if}
+ </div>
+ </div>
+ </nav>
</header>
<style>
- .z {
- z-index: 100;
- }
+ .z {
+ z-index: 100;
+ }
</style>