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

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

    .left {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        border-right: 1px solid #aaa;
        background: #fff;
        overflow-y: auto;
        width: 330px;
        z-index: 900;
        white-space: pre-line;
    }

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

    .navtop {
        display: flex;
		width: 100%;
		height: 60px;
        background-color: white;
        font-size: 30pt;
        color: #AAAAAA;
        justify-content: right;
        padding: 5px 5px 5px;
        border-bottom: #999999 solid 1px;
    }
    .bg {
        position: fixed;
        display: block;
        width: 100vw;
        height: 100vw;
        left: 0;
        top: 0;
        background-color: rgba(0, 0, 0, 10%);
        z-index: 800;
    }
    
    .navitems {
        display: flex;
        flex-direction: column
    }

    .left .navitems {
        padding: 2rem 1rem 0.6rem;
    }
    
</style>

{#if show}
    {#if side == "right"}
        <div class="bg" on:click={() => {show = false;}}></div>
    {/if}
    <nav class={"nav " + side} transition:fly={{x: (side == "left" ? -400 : 600), opacity: 1, duration: 800}}>
        {#if side == "left"}
            <div class="navtop" on:click={() => {show = false;}}
                style="justify-content:{side == "left" ? "right" : "left"}; cursor:pointer;">
                { side == "left" ? "<" : ">" }
            </div>
        {/if}
        <div class="navitems">
            <slot> 

            </slot>
        </div>
    </nav>
{/if}