<script lang="ts">
    import { fly } from "svelte/transition";
    import Modal from "./Modal.svelte";

    const click = () => {
        modal_show = true;
        show = false;
    };

    function overlay_click(e: MouseEvent) {
        //@ts-ignore
        if ("close" in e.target.dataset) show = false;
    }

    export let show = false;
    let modal_show = false;
</script>

{#if show}
    <div class="overlay" data-close on:click={overlay_click}>
        <nav transition:fly={{ x: -250, opacity: 1 }}>
            <slot>
                <button on:click={click}>About</button>
            </slot>
        </nav>
    </div>
{/if}

<Modal bind:show={modal_show} />

<style>
    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0);
        z-index: 10;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    nav {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        padding: 2rem 1rem 0.6rem;
        border-right: 1px solid #aaa;
        background: #fff;
        overflow-y: auto;
        width: 20rem;
    }
</style>
