tabler/preview/pages/offcanvas.astro

---
// Port of preview/pages/offcanvas.html (layout: default)
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';

const directions = ['start', 'end', 'top', 'bottom'];

// Liquid `capitalize` filter.
const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
---

<DefaultLayout title="Offcanvas" pageHeader="Offcanvas" pageMenu="base.offcanvas">
	<div class="card">
		<div class="card-body">
			{
				directions.map((direction) => (
					<a
						class="btn"
						data-bs-toggle="offcanvas"
						href={`#offcanvas${capitalize(direction)}`}
						role="button"
						aria-controls={`offcanvas${capitalize(direction)}`}
					>
						Toggle {direction} offcanvas
					</a>
				))
			}
		</div>
	</div>

	{
		directions.map((direction) => (
			<div
				class={`offcanvas offcanvas-${direction}`}
				tabindex="-1"
				id={`offcanvas${capitalize(direction)}`}
				aria-labelledby={`offcanvas${capitalize(direction)}Label`}
			>
				<div class="offcanvas-header">
					<h2 class="offcanvas-title" id={`offcanvas${capitalize(direction)}Label`}>
						{capitalize(direction)} offcanvas
					</h2>
					<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close" />
				</div>
				<div class="offcanvas-body">
					<div>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda ea est, eum exercitationem fugiat
						illum itaque laboriosam magni necessitatibus, nemo nisi numquam quae reiciendis repellat sit soluta unde.
						Aut!
					</div>
					<div class="mt-3">
						<button class="btn btn-primary" type="button" data-bs-dismiss="offcanvas">
							Close offcanvas
						</button>
					</div>
				</div>
			</div>
		))
	}
</DefaultLayout>