Slide Over Panels

<!-- Slide Over Trigger -->
<x-aura::button variant="primary" x-on:click="$dispatch('open-sheet', 'filter-drawer')">
    Filters
</x-aura::button>

<!-- Slide Over Side Sheet Component -->
<x-aura::sheet name="filter-drawer" side="right" title="Filter Records" description="Narrow down dataset results.">
    <x-aura::flex direction="col" gap="4">
        <x-aura::field label="Status Filter">
            <x-aura::select>
                <option>All Statuses</option>
                <option>Active</option>
            </x-aura::select>
        </x-aura::field>
    </x-aura::flex>

    <x-slot:footer>
        <x-aura::button variant="secondary" size="sm" x-on:click="open = false">
            Cancel
        </x-aura::button>

        <x-aura::button variant="primary" size="sm">
            Apply
        </x-aura::button>
    </x-slot:footer>
</x-aura::sheet>