<script lang="ts">
    import logoUrl from "$lib/assets/logo.svg";
    import type { Snippet } from "svelte";

    interface Props {
        children?: Snippet;
    }

    const { children }: Props = $props();
</script>

<nav>
    <a href="/" class="logo">
        <img src={logoUrl} alt="logo" />
    </a>
    <div class="rightButton">{@render children?.()}</div>
</nav>

<style>
    nav {
        display: flex;
        position: sticky;
        width: 100%;
        height: 4rem;
        top: 0;
        left: 0;
        background: linear-gradient(-77deg, #2e4653, #3a5b56);
        box-shadow: 0rem 0rem 0.5rem #182125;
        align-items: center;
    }

    .logo {
        display: block;
        height: 100%;
    }
    .logo img {
        height: 100%;
    }

    .rightButton {
        display: flex;
        flex-direction: row-reverse;
        flex: 1;
    }
</style>
