<script lang="ts">
    import { link } from "svelte-routing"
    // import * as animateScroll from "svelte-scrollto"

    import { generalInfo, showMobileNav } from "../../store"

    import Navigation from "./Navigation.svelte"
    import Image from "./Image.svelte"

    let y: number = 0
    let innerHeight: number = 0
    let outerHeight: number = 0
</script>

<svelte:window bind:scrollY="{y}" bind:innerHeight bind:outerHeight />

<header>
    <div class="header-content">
        <a href="/" class="brand-container" use:link>
            <Image
                collectionName="general"
                entryId="{$generalInfo?.id}"
                file="{$generalInfo?.media?.brand}"
                alt="{$generalInfo?.meta?.metaTitle}"
                cssClass="brand"
            />
        </a>

        <div class="header-content-right">
            <Navigation />

            <div class="nav-mobile-toggle" on:click="{() => ($showMobileNav = !$showMobileNav)}" on:keydown>
                {#if $showMobileNav}
                    <img src="img/icons/close.svg" alt="" />
                {:else}
                    <img src="img/icons/menu.svg" alt="" />
                {/if}
            </div>
        </div>
    </div>
</header>

<div class="main-mobile" class:show="{$showMobileNav}">
    <Navigation mobile="{true}" />
</div>
