56 lines
1.1 KiB
Svelte
56 lines
1.1 KiB
Svelte
{#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> |