<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 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", "transition ease-out duration-100", "opacity-100"],
"leave": ["opacity-100", "transition ease-in duration-100", "opacity-0 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()">
<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-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.
By default sidepanel opens on the right. To swap it to the left side:
right-0 to the left-0 class on the main elementtranslate to the negative -translate class on the transition directiveTo 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 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", "transition ease-out duration-100", "opacity-100"],
"leave": ["opacity-100", "transition ease-in duration-100", "opacity-0 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()">
<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>