57 lines
1.2 KiB
Svelte
57 lines
1.2 KiB
Svelte
<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>
|