<script lang="ts">
    import { onMount } from "svelte"
    import { spaLink } from "../../actions"

    let scrolled: boolean = false,
        isHomepage: boolean = true

    function checkScroll() {
        scrolled = window.scrollY >= 100
    }

    onMount(() => {
        if (typeof window !== "undefined") {
            checkScroll()
            window.addEventListener("scroll", checkScroll)
            return () => {
                window.removeEventListener("scroll", checkScroll)
            }
        }
    })

    $: checkScroll()
    $: darkBG = scrolled
</script>

<header
    class="headercontainer"
    id={"header-container"}
    class:scrolled={darkBG}
    class:homepageHeader={isHomepage}
    role="dialog"
    aria-label="Hauptnavigation"
>
    <div class="padding">
        <nav class="menu">
            <a
                href="/"
                use:spaLink
                class="logo-container"
                aria-label="Go to homepage"
            >
                <img
                    src="../../../../logo/KontextWerk.svg"
                    alt="logo"
                />
            </a>
        </nav>
    </div>
</header>

<style lang="less">
    @import "../../assets/css/variables.less";

    @desktop: ~"only screen and (min-width: 1440px)";

    .headercontainer {
        display: flex;
        flex-direction: column;
        @media @mobile {
            overflow: hidden;
        }
        position: sticky;
        z-index: 5500;
        top: 0px;

        justify-content: space-between;
        background-color: #0d0c0c;

        align-items: center;
        width: 100%;
        .padding {
            width: 100%;
            padding: 0px var(--horizontal-default-margin);
            height: 100%;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            .menu {
                max-width: var(--normal-max-width);
                width: 100%;
                display: flex;
                height: 86px;
                align-items: center;
                justify-content: space-between;
                .logo-container {
                    height: 64px;
                    display: flex;
                    align-items: flex-start;
                    img {
                        height: 60px;
                        width: auto;
                        object-fit: contain;
                    }
                }
            }
        }
        &.homepageHeader {
            background-color: transparent;
        }
        &.scrolled&.homepageHeader {
            box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.2);
            background-color: var(--bg-100);
        }
    }
</style>
