<header>
    <nav>
        <button
            class="circle transparent"
            on:click={() => (show_menu = !show_menu)}>
            <i>menu</i>
        </button>
        <h5 class="max left-align">Ottawa board games for sale and trade</h5>
    </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="/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);
</script>

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