{#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}/>

<script>
    import {fly} from 'svelte/transition';
    import Modal from './Modal.svelte';

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

    function overlay_click(e) {
        if ('close' in e.target.dataset)
            show = false;
    }

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

<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>