Drawer

<div style="min-height: 400px">
    <twig:Drawer id="drawer-demo">
        <twig:Drawer:Trigger>
            <twig:Button variant="outline" {{ ...drawer_trigger_attrs }}>Open Drawer</twig:Button>
        </twig:Drawer:Trigger>
        <twig:Drawer:Content>
            <div class="mx-auto w-full max-w-sm">
                <twig:Drawer:Header>
                    <twig:Drawer:Title>Move Goal</twig:Drawer:Title>
                    <twig:Drawer:Description>Set your daily activity goal.</twig:Drawer:Description>
                </twig:Drawer:Header>
                <div class="p-4 pb-0">
                    <p class="text-muted-foreground text-sm">Adjust the target you want to reach each day.</p>
                </div>
                <twig:Drawer:Footer>
                    <twig:Button>Submit</twig:Button>
                    <twig:Drawer:Close>
                        <twig:Button variant="outline" {{ ...drawer_close_attrs }}>Cancel</twig:Button>
                    </twig:Drawer:Close>
                </twig:Drawer:Footer>
            </div>
        </twig:Drawer:Content>
    </twig:Drawer>
</div>

php bin/console ux:install drawer --kit shadcn

composer require twig/extra-bundle twig/html-extra:^3.24.0 tales-from-a-dev/twig-tailwind-extra:^1.3.0 symfony/ux-twig-component:^3.5 symfony/ux-icons

{# @prop id string Unique identifier used to generate internal Drawer IDs. #}
{# @prop direction 'top'|'right'|'bottom'|'left' Which edge the drawer slides in from. #}
{# @prop open boolean Whether the drawer is open on initial render. #}
{# @block content The drawer structure, typically includes `Drawer:Trigger` and `Drawer:Content`. #}
{%- props id, direction = 'bottom', open = false -%}

{%- set _drawer_id = 'drawer-' ~ id -%}
{%- set _drawer_title_id = _drawer_id ~ '-title' -%}
{%- set _drawer_description_id = _drawer_id ~ '-description' -%}
{%- do provide('drawer.id', _drawer_id) -%}
{%- do provide('drawer.direction', direction) -%}
{%- do provide('drawer.titleId', _drawer_title_id) -%}
{%- do provide('drawer.descriptionId', _drawer_description_id) -%}
<div
    data-slot="drawer"
    data-dialog-open-value="{{ open ? 'true' : 'false' }}"
    aria-labelledby="{{ _drawer_title_id }}"
    aria-describedby="{{ _drawer_description_id }}"
    {{ attributes.defaults({
        'data-controller': 'dialog',
    }) }}
>
    {% block content %}{% endblock %}
</div>

{# @block content The close trigger element (e.g., a `Button`) that closes the drawer when clicked. #}
{%- set drawer_close_attrs = {
    'data-slot': 'drawer-close',
    'data-action': 'click->dialog#close'|html_attr_type('sst'),
} -%}
{%- block content %}{% endblock -%}

{# @block content The drawer content, typically includes `Drawer:Header` and optionally `Drawer:Footer`. #}
{%- set _drawer_id = inject('drawer.id') -%}
{%- set _drawer_direction = inject('drawer.direction', 'bottom') -%}
{%- set style = html_cva(
    base: 'group/drawer-content fixed z-50 m-0 flex h-auto max-h-none w-auto max-w-none flex-col bg-background p-0 outline-none transition duration-300 ease-in-out transition-discrete backdrop:bg-black/50 backdrop:opacity-0 backdrop:transition-[opacity,display,overlay] backdrop:duration-300 backdrop:ease-in-out backdrop:transition-discrete open:backdrop:opacity-100 starting:open:backdrop:opacity-0',
    variants: {
        direction: {
            top: 'inset-x-0 top-0 bottom-auto mb-24 max-h-[80vh] rounded-b-lg border-b -translate-y-full open:translate-y-0 starting:open:-translate-y-full',
            bottom: 'inset-x-0 bottom-0 top-auto mt-24 max-h-[80vh] rounded-t-lg border-t translate-y-full open:translate-y-0 starting:open:translate-y-full',
            right: 'inset-y-0 right-0 left-auto h-full w-3/4 border-l translate-x-full open:translate-x-0 starting:open:translate-x-full sm:max-w-sm',
            left: 'inset-y-0 left-0 right-auto h-full w-3/4 border-r -translate-x-full open:translate-x-0 starting:open:-translate-x-full sm:max-w-sm',
        },
    },
) -%}
<dialog
    id="{{ _drawer_id }}"
    data-slot="drawer-content"
    data-dialog-target="dialog"
    data-direction="{{ _drawer_direction }}"
    {{ attributes.defaults({
        class: style.apply({direction: _drawer_direction})|tailwind_classes,
        'data-action': 'keydown.esc->dialog#close:prevent click->dialog#closeOnClickOutside',
    }) }}
>
    {% if _drawer_direction == 'bottom' %}
        <div class="mx-auto mt-4 h-2 w-[100px] shrink-0 rounded-full bg-muted"></div>
    {% endif %}
    {%- block content %}{% endblock -%}
</dialog>

{# @block content The descriptive text explaining the drawer purpose. #}
{%- set _drawer_descriptionId = inject('drawer.descriptionId') -%}
<p
    id="{{ _drawer_descriptionId }}"
    data-slot="drawer-description"
    {{ attributes.without('id').defaults({class: 'text-muted-foreground text-sm'|tailwind_classes}) }}
>
    {%- block content %}{% endblock -%}
</p>

{# @block content The footer area, typically contains action buttons. #}
<div
    data-slot="drawer-footer"
    {{ attributes.defaults({
        class: 'mt-auto flex flex-col gap-2 p-4'|tailwind_classes,
    }) }}
>
    {%- block content %}{% endblock -%}
</div>

{# @block content The header area, typically contains `Drawer:Title` and `Drawer:Description`. #}
<div
    data-slot="drawer-header"
    {{ attributes.defaults({
        class: 'flex flex-col gap-0.5 p-4 group-data-[direction=bottom]/drawer-content:text-center group-data-[direction=top]/drawer-content:text-center md:gap-1.5 md:text-left'|tailwind_classes,
    }) }}
>
    {%- block content %}{% endblock -%}
</div>

{# @block content The title text of the drawer. #}
{%- set _drawer_titleId = inject('drawer.titleId') -%}
<h2
    id="{{ _drawer_titleId }}"
    data-slot="drawer-title"
    {{ attributes.without('id').defaults({class: 'font-semibold text-foreground'|tailwind_classes}) }}
>
    {%- block content %}{% endblock -%}
</h2>

{# @block content The trigger element (e.g., a `Button`) that opens the drawer when clicked. #}
{%- set drawer_trigger_attrs = {
    'data-slot': 'drawer-trigger',
    'data-action': 'click->dialog#open'|html_attr_type('sst'),
    'data-dialog-target': 'trigger',
    'aria-haspopup': 'dialog',
} -%}
{%- block content %}{% endblock -%}

import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
    static targets = ['trigger', 'dialog'];

    static values = {
        open: Boolean,
    };

    connect() {
        if (this.openValue) {
            this.open();
        }
    }

    open() {
        this.dialogTarget.showModal();
        this._focusInitialElement();

        if (this.hasTriggerTarget) {
            if (this.dialogTarget.getAnimations().length > 0) {
                this.dialogTarget.addEventListener(
                    'transitionend',
                    () => {
                        this.triggerTarget.setAttribute('aria-expanded', 'true');
                    },
                    { once: true }
                );
            } else {
                this.triggerTarget.setAttribute('aria-expanded', 'true');
            }
        }
    }

    closeOnClickOutside({ target }) {
        if (target === this.dialogTarget) {
            this.close();
        }
    }

    _focusInitialElement() {
        // showModal() already focuses an [autofocus] target or the first focusable element;
        // when the author did not opt into autofocus, prefer the first form field instead.
        if (this.dialogTarget.querySelector('[autofocus]')) {
            return;
        }

        const field = this.dialogTarget.querySelector(
            'input:not([type="hidden"]):not([disabled]), textarea:not([disabled]), select:not([disabled])'
        );
        field?.focus();
    }

    close() {
        this.dialogTarget.close();

        if (this.hasTriggerTarget) {
            if (this.dialogTarget.getAnimations().length > 0) {
                this.dialogTarget.addEventListener('transitionend', () => {
                    this.triggerTarget.setAttribute('aria-expanded', 'false');
                });
            } else {
                this.triggerTarget.setAttribute('aria-expanded', 'false');
            }
        }
    }
}

{# @prop id string Unique identifier used to generate internal Dialog IDs. #}
{# @prop open boolean Whether the dialog is open on initial render. #}
{# @block content The dialog structure, typically includes `Dialog:Trigger` and `Dialog:Content`. #}
{%- props id, open = false -%}

{%- set _dialog_id = 'dialog-' ~ id -%}
{%- set _dialog_title_id = _dialog_id ~ '-title' -%}
{%- set _dialog_description_id = _dialog_id ~ '-description' -%}
{%- do provide('dialog.id', _dialog_id) -%}
{%- do provide('dialog.titleId', _dialog_title_id) -%}
{%- do provide('dialog.descriptionId', _dialog_description_id) -%}
<div
    data-slot="dialog"
    data-dialog-open-value="{{ open ? 'true' : 'false' }}"
    aria-labelledby="{{ _dialog_title_id }}"
    aria-describedby="{{ _dialog_description_id }}"
    {{ attributes.defaults({
        'data-controller': 'dialog',
    }) }}
>
    {% block content %}{% endblock %}
</div>

{# @block content The close trigger element (e.g., a `Button`) that closes the dialog when clicked. #}
{%- set dialog_close_attrs = {
    'data-slot': 'dialog-close',
    'data-action': 'click->dialog#close'|html_attr_type('sst'),
} -%}
{%- block content %}{% endblock -%}

{# @prop showCloseButton boolean Whether to display the close button in the top-right corner. #}
{# @block content The dialog content, typically includes `Dialog:Header` and optionally `Dialog:Footer`. #}
{%- props showCloseButton = true -%}
{%- set _dialog_id = inject('dialog.id') -%}

<dialog
    id="{{ _dialog_id }}"
    data-slot="dialog-content"
    data-dialog-target="dialog"
    {{ attributes.defaults({
        class: 'fixed top-1/2 left-1/2 z-50 w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 outline-none sm:max-w-sm opacity-0 scale-95 transition-all transition-discrete duration-100 backdrop:transition-discrete backdrop:duration-100 open:grid open:scale-100 open:opacity-100 open:backdrop:bg-black/10 supports-backdrop-filter:open:backdrop:backdrop-blur-xs starting:open:scale-95 starting:open:opacity-0'|tailwind_classes,
        'data-action': 'keydown.esc->dialog#close:prevent click->dialog#closeOnClickOutside',
    }) }}
>
    {%- block content %}{% endblock -%}
    {% if showCloseButton %}
        <twig:Button
            type="button"
            variant="ghost"
            size="icon-sm"
            class="absolute top-2 ltr:right-2 rtl:end-2"
            data-slot="dialog-close"
            data-action="click->dialog#close"
        >
            <twig:ux:icon name="lucide:x" />
            <span class="sr-only">Close</span>
        </twig:Button>
    {% endif %}
</dialog>

{# @block content The descriptive text explaining the dialog purpose. #}
{%- set _dialog_descriptionId = inject('dialog.descriptionId') -%}
<p
    id="{{ _dialog_descriptionId }}"
    data-slot="dialog-description"
    {{ attributes.without('id').defaults({class: 'text-muted-foreground text-sm *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground'|tailwind_classes}) }}
>
    {%- block content %}{% endblock -%}
</p>

{# @block content The footer area, typically contains action buttons. #}
<footer
    data-slot="dialog-footer"
    {{ attributes.defaults({
        class: '-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end'|tailwind_classes,
    }) }}
>
    {%- block content %}{% endblock -%}
</footer>

{# @block content The header area, typically contains `Dialog:Title` and `Dialog:Description`. #}
<header
    data-slot="dialog-header"
    {{ attributes.defaults({
        class: 'flex flex-col gap-2'|tailwind_classes,
    }) }}
>
    {%- block content %}{% endblock -%}
</header>

{# @block content The title text of the dialog. #}
{%- set _dialog_titleId = inject('dialog.titleId') -%}
<h2
    id="{{ _dialog_titleId }}"
    data-slot="dialog-title"
    {{ attributes.without('id').defaults({class: 'cn-font-heading text-base leading-none font-medium'|tailwind_classes}) }}
>
    {%- block content %}{% endblock -%}
</h2>

{# @block content The trigger element (e.g., a `Button`) that opens the dialog when clicked. #}
{%- set dialog_trigger_attrs = {
    'data-slot': 'dialog-trigger',
    'data-action': 'click->dialog#open'|html_attr_type('sst'),
    'data-dialog-target': 'trigger',
    'aria-haspopup': 'dialog',
} -%}
{%- block content %}{% endblock -%}

{# @prop variant 'default'|'secondary'|'destructive'|'outline'|'ghost'|'link' The visual style variant. #}
{# @prop size 'default'|'xs'|'sm'|'lg'|'icon'|'icon-xs'|'icon-sm'|'icon-lg' The button size. #}
{# @prop as 'button' The HTML tag to render. #}
{# @block content The button label and/or icon. #}
{%- props variant = 'default', size = 'default', as = 'button' -%}
{%- set style = html_cva(
    base: "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
    variants: {
        variant: {
            default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
            outline: 'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
            secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
            ghost: 'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',
            destructive: 'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
            link: 'text-primary underline-offset-4 hover:underline',
        },
        size: {
            default: 'h-8 gap-1.5 px-2.5 ltr:has-data-[icon=inline-end]:pr-2 rtl:has-data-[icon=inline-end]:pe-2 ltr:has-data-[icon=inline-start]:pl-2 rtl:has-data-[icon=inline-start]:ps-2',
            xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg ltr:has-data-[icon=inline-end]:pr-1.5 rtl:has-data-[icon=inline-end]:pe-1.5 ltr:has-data-[icon=inline-start]:pl-1.5 rtl:has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3",
            sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg ltr:has-data-[icon=inline-end]:pr-1.5 rtl:has-data-[icon=inline-end]:pe-1.5 ltr:has-data-[icon=inline-start]:pl-1.5 rtl:has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3.5",
            lg: 'h-9 gap-1.5 px-2.5 ltr:has-data-[icon=inline-end]:pr-2 rtl:has-data-[icon=inline-end]:pe-2 ltr:has-data-[icon=inline-start]:pl-2 rtl:has-data-[icon=inline-start]:ps-2',
            icon: 'size-8',
            'icon-xs': "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
            'icon-sm': 'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
            'icon-lg': 'size-9',
        },
    },
) -%}
<{{ as }}
    data-slot="button"
    data-size="{{ size }}"
    data-variant="{{ variant }}"
    {{ attributes.defaults({
        class: style.apply({variant: variant, size: size})|tailwind_classes,
        type: 'button',
    }) }}
>
    {%- block content %}{% endblock -%}
</{{ as }}>

<div class="flex flex-wrap gap-2" style="min-height: 400px">
    {% for direction in ['top', 'right', 'bottom', 'left'] %}
        <twig:Drawer id="drawer-direction-{{ direction }}" direction="{{ direction }}">
            <twig:Drawer:Trigger>
                <twig:Button variant="outline" class="capitalize" {{ ...drawer_trigger_attrs }}>{{ direction }}</twig:Button>
            </twig:Drawer:Trigger>
            <twig:Drawer:Content class="data-[direction=bottom]:max-h-[50vh] data-[direction=top]:max-h-[50vh]">
                <twig:Drawer:Header>
                    <twig:Drawer:Title>Move Goal</twig:Drawer:Title>
                    <twig:Drawer:Description>Set your daily activity goal.</twig:Drawer:Description>
                </twig:Drawer:Header>
                <div class="min-h-0 flex-1 overflow-y-auto px-4">
                    {% for i in 1..8 %}
                        <p class="mb-2 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    {% endfor %}
                </div>
                <twig:Drawer:Footer>
                    <twig:Button>Submit</twig:Button>
                    <twig:Drawer:Close>
                        <twig:Button variant="outline" {{ ...drawer_close_attrs }}>Cancel</twig:Button>
                    </twig:Drawer:Close>
                </twig:Drawer:Footer>
            </twig:Drawer:Content>
        </twig:Drawer>
    {% endfor %}
</div>

<div style="min-height: 400px">
    <twig:Drawer id="drawer-rtl" dir="rtl">
        <twig:Drawer:Trigger>
            <twig:Button variant="outline" {{ ...drawer_trigger_attrs }}>فتح</twig:Button>
        </twig:Drawer:Trigger>
        <twig:Drawer:Content>
            <div class="mx-auto w-full max-w-sm">
                <twig:Drawer:Header>
                    <twig:Drawer:Title>تعديل الهدف</twig:Drawer:Title>
                    <twig:Drawer:Description>حدد هدف نشاطك اليومي.</twig:Drawer:Description>
                </twig:Drawer:Header>
                <twig:Drawer:Footer>
                    <twig:Button>إرسال</twig:Button>
                    <twig:Drawer:Close>
                        <twig:Button variant="outline" {{ ...drawer_close_attrs }}>إلغاء</twig:Button>
                    </twig:Drawer:Close>
                </twig:Drawer:Footer>
            </div>
        </twig:Drawer:Content>
    </twig:Drawer>
</div>