<button
x-data
@click="$dispatch('open-sidepanel', { id: 'sidepanel' })"
class="mx-auto block rounded-md border-violet-700 bg-violet-500 px-4 py-2 font-medium text-gray-100 hover:bg-violet-600 focus:ring-violet-200 dark:bg-violet-500 dark:hover:bg-violet-600"
>
Open sidepanel
</button>
<div x-data="sidepanel" id="sidepanel" x-cloak>
<template x-if="_isModal">
<div
x-bind="backdrop"
x-alt-transition='{
"enter": ["opacity-0", "transition ease-out duration-100", "opacity-100"],
"leave": ["opacity-100", "transition ease-in duration-100", "opacity-0"]
}'
class="fixed inset-0 z-30 overflow-y-auto bg-black/50"
></div>
</template>
<aside
x-bind="sidepanel"
class="fixed right-0 data-left:left-0 top-0 z-30 flex h-full w-[350px] flex-col bg-secondary-100 px-6 text-left shadow-lg shadow-black/40 dark:bg-dark-700 dark:text-text-300"
x-alt-transition='{
"enter": ["opacity-0 translate-x-40 data-left:-translate-x-40", "transition ease-out duration-100", "opacity-100"],
"leave": ["opacity-100", "transition ease-in duration-100", "opacity-0 translate-x-40 data-left:-translate-x-40"]
}'
>
<div class="flex w-full items-center justify-between">
<div class="my-4 text-lg font-semibold">Header</div>
<button @click="close()" class="hover:bg-gray-300 rounded-md p-2 dark:hover:bg-dark-500">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
viewBox="0 0 16 16"
>
<path
d="M1.293 1.293a1 1 0 0 1 1.414 0L8 6.586l5.293-5.293a1 1 0 1 1 1.414 1.414L9.414 8l5.293 5.293a1 1 0 0 1-1.414 1.414L8 9.414l-5.293 5.293a1 1 0 0 1-1.414-1.414L6.586 8 1.293 2.707a1 1 0 0 1 0-1.414z"
/>
</svg>
</button>
</div>
<div class="h-full overflow-y-auto">sidepanel</div>
</aside>
</div>
<script defer src="https://cdn.jsdelivr.net/npm/litewind-alpine@0.x.x/components/sidepanel/dist/cdn.min.js"></script>
The data for the component is provided by the sidepanel function in the x-data directive and the props in the data-* attributes.
data-left
false
Boolean
If true, the sidepanel is placed on the left side.
data-modal
false
Boolean
Adds backdrop after opening sidepanel. Clicking backdrop closes sidepanel.
To open sidepanel simply dispatch open-sidepanel event anywhere in your application. The data in the event is the id of the sidepanel to open.
To make sidepanel with a backdrop add the data-modal prop. Backdrop can be clicked to close the sidepanel.
<button
x-data
@click="$dispatch('open-sidepanel', { id: 'sidepanelModal' })"
class="mx-auto block rounded-md border-violet-700 bg-violet-500 px-4 py-2 font-medium text-gray-100 hover:bg-violet-600 focus:ring-violet-200 dark:bg-violet-500 dark:hover:bg-violet-600"
>
Open modal sidepanel
</button>
<div x-data="sidepanel" data-modal="true" id="sidepanelModal" x-cloak>
<template x-if="_isModal">
<div
x-bind="backdrop"
x-alt-transition='{
"enter": ["opacity-0", "transition ease-out duration-100", "opacity-100"],
"leave": ["opacity-100", "transition ease-in duration-100", "opacity-0"]
}'
class="fixed inset-0 z-30 overflow-y-auto bg-black/50"
></div>
</template>
<aside
x-bind="sidepanel"
class="fixed right-0 data-left:left-0 top-0 z-30 flex h-full w-[350px] flex-col bg-secondary-100 px-6 text-left shadow-lg shadow-black/40 dark:bg-dark-700 dark:text-text-300"
x-alt-transition='{
"enter": ["opacity-0 translate-x-40 data-left:-translate-x-40", "transition ease-out duration-100", "opacity-100"],
"leave": ["opacity-100", "transition ease-in duration-100", "opacity-0 translate-x-40 data-left:-translate-x-40"]
}'
>
<div class="flex w-full items-center justify-between">
<div class="my-4 text-lg font-semibold">Header</div>
<button @click="close()" class="hover:bg-gray-300 rounded-md p-2 dark:hover:bg-dark-500">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
viewBox="0 0 16 16"
>
<path
d="M1.293 1.293a1 1 0 0 1 1.414 0L8 6.586l5.293-5.293a1 1 0 1 1 1.414 1.414L9.414 8l5.293 5.293a1 1 0 0 1-1.414 1.414L8 9.414l-5.293 5.293a1 1 0 0 1-1.414-1.414L6.586 8 1.293 2.707a1 1 0 0 1 0-1.414z"
/>
</svg>
</button>
</div>
<div class="h-full overflow-y-auto">sidepanel</div>
</aside>
</div>