Code

<button type="button" class="btn blue-btn-soft-primary d-lg-none" command="show-modal" commandfor="myDrawer">
    Open offcanvas
</button>

<dialog class="blue-lg-modal blue-modal modal" id="myDrawer" aria-describedby="offcanvasLabel">
    <div class="offcanvas offcanvas-start">
        <div class="offcanvas-header">
            <h1 class="h5 offcanvas-title" id="offcanvasLabel">Offcanvas</h1>
            <form method="dialog" style="display: contents;">
                <button type="submit" class="btn-close" aria-label="Close"></button>
            </form>
        </div>
        <div class="offcanvas-body">
            <div>
                On larger screens, you will see this content immediately. On smaller screens, it will be hidden inside a
                drawer and you can open it using a button.
            </div>
        </div>
    </div>
    <form method="dialog" class="blue-modal-backdrop"><button>Close</button></form>
</dialog>

<script>
    document.addEventListener("DOMContentLoaded", () => {
        blueWeb.modalResponsive.init(myDrawer)
    })
</script>