{{-- Left --}}
<x-drawer wire:model="showDrawer1" class="w-11/12 lg:w-1/3">
    <div>...</div>
    <x-button label="Close" @click="$wire.showDrawer1 = false" />
</x-drawer>
 
{{-- Right --}}
<x-drawer wire:model="showDrawer2" class="w-11/12 lg:w-1/3" right>
    <div>...</div>
    <x-button label="Close" @click="$wire.showDrawer2 = false" />
</x-drawer>
 
<x-button label="Open Left" wire:click="$toggle('showDrawer1')" />
<x-button label="Open Right" wire:click="$toggle('showDrawer2')" />

public bool $showDrawer1 = false;
public bool $showDrawer2 = false;

<x-drawer
    wire:model="showDrawer3"
    title="Hello"
    subtitle="Livewire"
    separator
    with-close-button
    close-on-escape
    class="w-11/12 lg:w-1/3"
>
    <div>Hey!</div>
 
    <x-slot:actions>
        <x-button label="Cancel" @click="$wire.showDrawer3 = false" />
        <x-button label="Confirm" class="btn-primary" icon="o-check" />
    </x-slot:actions>
</x-drawer>
 
<x-button label="Open" @click="$wire.showDrawer3 = true" />

<x-drawer without-trap-focus ... />