Offcanvas در بوت‌استرپ

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
    <div class="offcanvas-header">
        <h5 id="offcanvasRightLabel">Offcanvas Right</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        Content for the right-sliding offcanvas.
    </div>
</div>

<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel" style="height: 50vh;">
    <div class="offcanvas-header">
        <h5 id="offcanvasTopLabel">Offcanvas Top</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        Content for the top-sliding offcanvas. The `height` can be adjusted with inline styles or CSS.
    </div>
</div>

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel" style="height: 50vh;">
    <div class="offcanvas-header">
        <h5 id="offcanvasBottomLabel">Offcanvas Bottom</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        Content for the bottom-sliding offcanvas. The `height` can be adjusted.
    </div>
</div>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
    <div class="offcanvas-header">
        <h5 id="offcanvasRightLabel">Offcanvas Right</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        Content for the right-sliding offcanvas.
    </div>
</div>

<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel" style="height: 50vh;">
    <div class="offcanvas-header">
        <h5 id="offcanvasTopLabel">Offcanvas Top</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        Content for the top-sliding offcanvas. The `height` can be adjusted with inline styles or CSS.
    </div>
</div>

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel" style="height: 50vh;">
    <div class="offcanvas-header">
        <h5 id="offcanvasBottomLabel">Offcanvas Bottom</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        Content for the bottom-sliding offcanvas. The `height` can be adjusted.
    </div>
</div>

<div class="offcanvas offcanvas-start" data-bs-backdrop="false" tabindex="-1" id="offcanvasNoBackdrop" aria-labelledby="offcanvasNoBackdropLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNoBackdropLabel">Offcanvas with no backdrop</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        Click outside this offcanvas, and it won't close.
    </div>
</div>

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="offcanvasStaticBackdrop" aria-labelledby="offcanvasStaticBackdropLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasStaticBackdropLabel">Offcanvas with static backdrop</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        Clicking outside this offcanvas won't close it. You have to use the close button.
    </div>
</div>

<div class="offcanvas offcanvas-start" data-bs-keyboard="false" tabindex="-1" id="offcanvasNoKeyboard" aria-labelledby="offcanvasNoKeyboardLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNoKeyboardLabel">Offcanvas - no keyboard close</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        Pressing the Escape key won't close this offcanvas.
    </div>
</div>

const myOffcanvas = document.getElementById('offcanvasExample');
myOffcanvas.addEventListener('show.bs.offcanvas', () => {
    console.log('Offcanvas is about to be shown.');
});

myOffcanvas.addEventListener('shown.bs.offcanvas', () => {
    console.log('Offcanvas is now fully visible.');
});