@props([
    'id' => 'off-canvas-' . uniqid(),
    'placement' => 'end',
])
{{--<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#{{ $id }}" aria-controls="{{ $id }}">Enable both scrolling & backdrop</button>--}}

<div wire:ignore.self class="offcanvas offcanvas-{{ $placement }}" data-bs-scroll="true" tabindex="-1" id="{{ $id }}"
     aria-labelledby="{{ $id }}Label">
    <div class="offcanvas-header">
        @isset($header)
            <h5 class="offcanvas-title" id="{{ $id }}Label">{{ $header }}</h5>
        @endisset
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"><i
                    class="fas fa-close"></i></button>
    </div>
    <div class="offcanvas-body">
        {{ $slot }}
    </div>
</div>