<template>
    <div>

        <div :class="visible ? 'show' : ''" class="offcanvas offcanvas-end"
            :style="{ width: width, visibility: visible ? '' : 'hidden' }">

            <slot name="header"></slot>
            <div class="offcanvas-body">
                <slot name="body"></slot>
            </div>
        </div>
        <div v-show="visible" class="modal-backdrop fade show"></div>
    </div>
</template>
<script setup>

//#region props
const props = defineProps({
    visible: Boolean,
    width: {
        type: String,
        default: '50%'
    }
});
//#endregion

</script>
<style scoped></style>