@props([
    'id',
    'title' => null,
    'placement' => 'end',
])

<div class="offcanvas offcanvas-{{ $placement }}" tabindex="-1" id="{{ $id }}" aria-labelledby="{{ $id }}-label">
    <div class="offcanvas-header border-bottom">
        @if($title)
            <h5 class="offcanvas-title" id="{{ $id }}-label">{{ $title }}</h5>
        @endif
        @isset($header)
            {{ $header }}
        @endisset
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        {{ $slot }}
    </div>
    @isset($footer)
        <div class="offcanvas-footer border-top p-3">
            {{ $footer }}
        </div>
    @endisset
</div>