<script>
    import { fly } from 'svelte/transition'
    import SideBar from './SideBar.svelte';
    let show = true;
    let sidebar_show = false;

    function showBar() {
        sidebar_show = !sidebar_show;
    }

    function hide() {
        if (window.scrollY < 400) {
            show = true
        } else {
            show = false
        }
    }

</script>

<style>
    .sidebtn {
        border-radius: 5px;
        border: 0px;
        width: 70px;
        height: 70px;
        position: fixed;
        left: -20px;
        top: 10%;
        padding-right: 10px;
        text-align: right;
        background-color: #e65100;
        color: #ffffff;
    }

    .sidebtn:focus {
        background-color: #f57c00;
    }

    .sidebtn:hover {
        background-color: #ef6c00;
    }

</style>

<svelte:window on:scroll={hide}></svelte:window>

{#if (show)}
    <button class="sidebtn"
    transition:fly="{{ x : -50, duration : 400}}"
    on:click={showBar}>
        행사<br>목록
    </button>
    <SideBar bind:show={sidebar_show}>행사목록!</SideBar>
{/if}