Block Offcanvas

{# derafu_twig:templates/pages/components/block-offcanvas.html.twig #}

{% extends 'layouts/default.html.twig' %}

{% block content %}

{# Left Offcanvas (start) #}
<div class="mb-4">
    <button class="btn btn-light d-block" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-left">
        Left Menu
    </button>
</div>

<twig:block-offcanvas
    id="offcanvas-left"
    position="start"
    title="Navigation Menu"
    content="<ul class='nav flex-column'>
        <li class='nav-item'><a class='nav-link' href='#'>Home</a></li>
        <li class='nav-item'><a class='nav-link' href='#'>Products</a></li>
        <li class='nav-item'><a class='nav-link' href='#'>Services</a></li>
        <li class='nav-item'><a class='nav-link' href='#'>Contact</a></li>
    </ul>"
/>

{# Right Offcanvas with Form #}
<div class="mt-2 mb-3">
    <button class="btn btn-light d-block" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-right">
        Edit Profile
    </button>
</div>

<twig:block-offcanvas
    id="offcanvas-right"
    position="end"
    title="Edit Profile"
    content="<form id='profileForm'>
        <div class='mb-3'>
            <label class='form-label'>Name</label>
            <input type='text' class='form-control'>
        </div>
        <div class='mb-3'>
            <label class='form-label'>Email</label>
            <input type='email' class='form-control'>
        </div>
        <div class='mb-3'>
            <label class='form-label'>Bio</label>
            <textarea class='form-control' rows='3'></textarea>
        </div>
    </form>"
    :buttons="[
        {
            text: 'Cancel',
            type: 'light',
            dismiss: true
        },
        {
            text: 'Save',
            type: 'success',
            attributes: 'onclick=&quot;document.getElementById(\'profileForm\').submit()&quot;'
        }
    ]"
/>

{# Top Offcanvas #}
<div class="mt-3 mb-4">
    <button class="btn btn-light d-block" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-top">
        Notifications
    </button>
</div>

<twig:block-offcanvas
    id="offcanvas-top"
    position="top"
    title="Notifications"
    :scrollable="true"
    content="<div class='list-group'>
        <a href='#' class='list-group-item list-group-item-action'>
            <div class='d-flex w-100 justify-content-between'>
                <h6 class='mb-1'>New message</h6>
                <small>3 mins ago</small>
            </div>
            <p class='mb-1'>You have a new support message.</p>
        </a>
        <!-- More notifications... -->
    </div>"
/>

{# Bottom Offcanvas without Backdrop #}
<div class="mt-2 mb-3">
    <button class="btn btn-light d-block" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-bottom">
        Music Player
    </button>
</div>

<twig:block-offcanvas
    id="offcanvas-bottom"
    position="bottom"
    :withBackdrop="false"
    :showClose="false"
    content="<div class='d-flex align-items-center justify-content-between'>
        <div class='d-flex align-items-center'>
            <img src='{{ base_path }}/img/block-hero.jpeg' width='50' height='50' class='me-3'>
            <div>
                <h6 class='mb-0'>Song Name</h6>
                <small>Artist</small>
            </div>
        </div>
        <div class='btn-group'>
            <button class='btn btn-link'><i class='fas fa-backward'></i></button>
            <button class='btn btn-link'><i class='fas fa-play'></i></button>
            <button class='btn btn-link'><i class='fas fa-forward'></i></button>
        </div>
    </div>"
/>

{# Offcanvas with Scroll and No Backdrop #}
<div class="mt-2 mb-3">
    <button class="btn btn-light d-block" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-scroll">
        Documentation
    </button>
</div>

<twig:block-offcanvas
    id="offcanvas-scroll"
    position="end"
    title="Documentation"
    :scrollable="true"
    :withBackdrop="false"
    content="<div>
        <h4>Introduction</h4>
        <p>Lorem ipsum dolor sit amet...</p>
        <h4>Getting Started</h4>
        <p>Sed do eiusmod tempor incididunt...</p>
        <h4>Configuration</h4>
        <p>Ut enim ad minim veniam...</p>
        <!-- More content to demonstrate scroll -->
    </div>"
    :buttons="[
        {
            text: 'Close',
            type: 'secondary',
            dismiss: true
        }
    ]"
/>

{% endblock %}