Sheet

<x-aura::button variant="primary" x-on:click="$dispatch('open-sheet', 'filter-sheet')">
    Filter
</x-aura::button>

<x-aura::sheet name="filter-sheet" side="right" maxWidth="md" title="Filter Products">
    <x-aura::flex direction="col" align="stretch" gap="4">
        <x-aura::field label="Category">
            <x-aura::select>
                <option>All Categories</option>
                <option>Studio Headphones</option>
            </x-aura::select>
        </x-aura::field>
    </x-aura::flex>

    <x-slot:footer>
        <x-aura::button variant="ghost" size="sm" x-on:click="$dispatch('close-sheet', 'filter-sheet')">
            Cancel
        </x-aura::button>

        <x-aura::button variant="primary" size="sm" x-on:click="$dispatch('close-sheet', 'filter-sheet')">
            Apply
        </x-aura::button>
    </x-slot:footer>
</x-aura::sheet>

<x-aura::button variant="outline" icon="menu" x-on:click="$dispatch('open-sheet', 'nav-sheet')">
    Navigation
</x-aura::button>

<x-aura::sheet name="nav-sheet" side="left" maxWidth="sm" title="Application Menu">
    <x-aura::flex direction="col" gap="2">
        <x-aura::link href="/guest" size="sm">Guest Portal</x-aura::link>
        <x-aura::link href="/admin" size="sm">Admin Dashboard</x-aura::link>
    </x-aura::flex>
</x-aura::sheet>

<x-aura::button variant="secondary" icon="share-2" x-on:click="$dispatch('open-sheet', 'share-sheet')">
    Share
</x-aura::button>

<x-aura::sheet name="share-sheet" side="bottom" title="Share Project">
    <x-aura::flex align="center" gap="3" :wrap="true">
        <x-aura::button variant="outline" size="sm" icon="copy">Copy</x-aura::button>
        <x-aura::button variant="outline" size="sm" icon="mail">Email</x-aura::button>
    </x-aura::flex>
</x-aura::sheet>