<header>
    <nav>
        <button
            class="circle transparent"
            on:click={() => (show_menu = !show_menu)}>
            <i>menu</i>
        </button>
        <h5 class="max left-align">
            <a href="/">Ottawa board games for sale and trade</a>
        </h5>

        <a class="" href="/cart/">
            {#if cart_size}
                <span class="badge circle">{cart_size}</span>
            {/if}

            <i>shopping_cart</i></a>
    </nav>
</header>
<dialog
    class="left primary-container"
    open={show_menu}
    use:clickOutside
    on:click_outside={() => (show_menu = false)}>
    <nav class="drawer primary-container">
        <header></header>
        <a href="/" on:click={hide_menu}>
            <i>list</i>
            <span class="max">listing</span>
        </a>
        <a href="/cart/" on:click={hide_menu}>
            <i>shopping_cart</i>
            <span>cart</span>
        </a>
        <a href="/stats/" on:click={hide_menu}>
            <i>numbers</i>
            <span>stats</span>
        </a>
        <a href="/about/" on:click={hide_menu}>
            <i>question_mark</i>
            <span>about</span>
        </a>
        <a class="backsie" on:click={hide_menu}>
            <i>arrow_back</i>
            <span class="max">back</span>
        </a>
    </nav>
</dialog>

<script>
    import clickOutside from '$lib/directives/clickOutside.js';
    let show_menu = false;
    const hide_menu = () => (show_menu = false);

    export let cart = [];
    $: cart_size = Object.values(cart).filter((x) => x).length;
</script>

<style>
    .backsie {
        margin-top: 2em;
    }
    dialog {
        font-size: var(--font-size-10);
    }
</style>
