Slideovers are commonly used for contextual modals or navigation. Slideovers are implemented using the Stimulus slideover_controller.
<div data-controller="slideover" data-action="keydown.esc->slideover#toggle">
<button class="btn btn-white" data-action="slideover#show:prevent">Open Slideover</button>
<div data-slideover-target="overlay"
data-action="click->slideover#toggle:prevent"
class="hidden fixed inset-0 bg-gray-800 bg-opacity-80 backdrop-blur-sm"
data-transition-enter="transition ease-in duration-200"
data-transition-enter-from="bg-opacity-0 backdrop-blur-none"
data-transition-enter-to="bg-opacity-80 backdrop-blur-sm"
data-transition-leave="transition ease-in duration-200"
data-transition-leave-from="bg-opacity-80 backdrop-blur-sm"
data-transition-leave-to="bg-opacity-0 backdrop-blur-none">
<div data-slideover-target="menu"
class="fixed max-w-sm w-full h-full inset-y-0 right-0 p-6 bg-white dark:bg-gray-900 dark:border-l dark:border-gray-800"
data-transition-enter="transform transition ease-in-out duration-500 sm:duration-700"
data-transition-enter-from="translate-x-full"
data-transition-enter-to="translate-x-0"
data-transition-leave="transform transition ease-in-out duration-500 sm:duration-700"
data-transition-leave-from="translate-x-0"
data-transition-leave-to="translate-x-full">
<button type="button" data-action="slideover#hide:prevent" class="hover:cursor-pointer absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><line x1="18" x2="6" y1="6" y2="18"></line><line x1="6" x2="18" y1="6" y2="18"></line></svg>
<span class="sr-only">Close</span>
</button>
<h4 class="mt-0">This is the panel content.</h4>
</div>
</div>
</div>