lucent-laravel/front/js/svelte/common/OffCanvas.svelte

<script>

    import {onDestroy, onMount} from "svelte";
    import offcanvas from "bootstrap/js/src/offcanvas.js";
    export let title = "";
    let offCanvasEl;
    let offCanvasInstance;

    export function show() {
        if(!offCanvasInstance){
            offCanvasInstance = new offcanvas(offCanvasEl);
        }
        offCanvasInstance.show();
    }
    onMount(()=>{
        offCanvasInstance = new offcanvas(offCanvasEl);
    });

    export function hide() {
        offCanvasInstance.hide();
    }
</script>

<div bind:this={offCanvasEl} class="offcanvas  offcanvas-end"  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>