<script>

    import {onMount} from "svelte";
    import offcanvas from "bootstrap/js/src/offcanvas.js";
    export let title = "";
    let isHidden = true;
    let offcanvasEl;
    let offcanvasInstance;

    export function show() {
        offcanvasInstance.show();
    }
    onMount(()=>{
        offcanvasInstance = new offcanvas(offcanvasEl);
    });

    export function hide(e) {
        e.preventDefault();
        offcanvasInstance.hide();
    }
</script>

<div bind:this={offcanvasEl} class="offcanvas  offcanvas-end"  data-bs-backdrop="static" tabindex="-1"
     aria-labelledby="offcanvasEditContent">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title">{title}</h5>
        <button type="button" on:click={hide} class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body" style="overflow: auto">
        <slot/>
    </div>
</div>