SideBar.svelte 1.1 KB
<script>
    import { fly } from 'svelte/transition';
    
    export let show = true;
    export let side = "left";
    </script>

<style>
    .nav {
        overflow-y: auto;
    }

    .left {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        /* padding: 2rem 1rem 0.6rem; */
        border-right: 1px solid #aaa;
        background: #fff;
        overflow-y: auto;
        padding: 2rem 1rem 0.6rem;
        width: 330px;
        z-index: 900;
    }

    .right {
        position: fixed;
        top: 0;
        right: 0;
        height: 100%;
        padding: 2rem 1rem 0.6rem;
        border-left: 1px solid #aaa;
        background: #fff;
        overflow-y: auto;
        width: 330px;
        z-index: 900;
    }

    .background {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
        z-index: 700;
	}
    
</style>

{#if show} 
    <div class="background" on:click={() => {show = false;}}></div>
    <nav class={"nav " + side} transition:fly={{x: (side == "left" ? -400 : 400), opacity: 1, duration: 800}}>
        <slot> 
        </slot>
    </nav>
{/if}