blob: 690f0f0efecd32f2e760fdcd218736af99158459 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<script lang="ts">
import CoinosLogo from "virtual:icons/coinos/logo";
import { goto } from "$app/navigation";
import { scroll } from "$lib/utils";
import { t } from "$lib/translations";
import { page } from "$app/stores";
let {
howItWorks = undefined,
faq = undefined,
about = undefined,
}: any = $props();
function startNow() {
const match = document.cookie.match(/(?:^|;\s*)username=([^;]*)/);
goto(match ? `/${decodeURIComponent(match[1])}` : "/register");
}
let header = $state();
</script>
<header class="w-full lg:w-5/6 p-4 mx-auto fixed sticky z-10 top-0 bg-base-100" bind:this={header}>
<nav class="block lg:flex justify-between items-center">
<div class="flex justify-start lg:justify-center items-center lg:space-x-5">
<a href="/" onclick={() => scroll(header)} aria-label="Home">
<CoinosLogo width="224" />
</a>
</div>
<!-- desktop nav -->
<div class="hidden space-x-5 lg:flex justify-center items-center font-bold">
{#if $page.url.pathname === "/"}
<button class="hover:opacity-80" onclick={() => scroll(howItWorks)}>
{$t("howItWorks.header")}
</button>
<button class="hover:opacity-80" onclick={() => scroll(faq)}>{$t("faq.header")}</button>
<button class="hover:opacity-80" onclick={() => scroll(about)}>{$t("about.header")}</button>
<button class="btn btn-accent !w-auto !rounded-full" onclick={startNow}>
{$t("nav.startInSeconds")}
</button>
{/if}
</div>
</nav>
</header>
|
