Offcanvas

														
<div x-data="{}" class="mb-3">
	<a class="btn btn-primary"
		@click="$dispatch('offcanvas-ex1')" href="javascript:void(0);">Link with href</a>
</div>
<div x-data="{ offcanvas: false }">
	<div x-on:offcanvas-ex1.window="offcanvas = !offcanvas" id="offcanvasExample">
		<div class="fixed top-0 left-0 z-999 w-screen h-screen bg-black/50" x-show="offcanvas" @click="offcanvas = false"></div>
		<div class="fixed top-0 left-0 flex flex-col sm:w-100 w-87.5 h-screen z-9999 bg-card duration-500 ease-in-out offcanvas-wrapper -translate-x-full" x-show="offcanvas" :class="{ 'translate-x-0!': offcanvas }">
			<div class="flex items-center justify-between p-4">
				<h5 class="offcanvas-title">Offcanvas</h5>
				<button type="button" class="btn-close dark:invert" @click="offcanvas = false"></button>
			</div>
			<div class="p-4">
				<p class="mb-4">
					Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
				</p>
				<div class="relative mb-4" x-data="{ open: false }">
					<button type="button" class="btn btn-primary dropdown-toggle" @click="open = true">
						Dropdown button
					</button>
					<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute top-full min-w-40 mt-1 z-2 text-sm"
					x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
						<a class="py-2 px-5 block hover:bg-primary/10 hover:text-primary" 
							@click="open = false" href="javascript:void(0);">Action</a>
						<a class="py-2 px-5 block hover:bg-primary/10 hover:text-primary"
								@click="open = false" href="javascript:void(0);">Another action</a>
						<a class="py-2 px-5 block hover:bg-primary/10 hover:text-primary" 
							@click="open = false" href="javascript:void(0);">Something else here</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
														
													

														
<div x-data="{}" class="mb-3">
	<a class="btn btn-primary" href="javascript:void(0);"
		@click="$dispatch('offcanvas-ex2')">Enable body scrolling</a>
</div>
<div x-data="{ offcanvas: false }">
	<div x-on:offcanvas-ex2.window="offcanvas = !offcanvas">
		<div class="fixed top-0 left-0 flex flex-col sm:w-100 w-87.5 h-screen z-9999 bg-card duration-500 ease-in-out offcanvas-wrapper -translate-x-full" x-show="offcanvas" :class="{ 'translate-x-0!': offcanvas }">
			<div class="flex items-center justify-between p-4">
				<h5 class="offcanvas-title">Offcanvas</h5>
				<button type="button" class="btn-close dark:invert" @click="offcanvas = false"></button>
			</div>
			<div class="p-4">
				<p class="mb-4">
					Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
				</p>
				<div class="relative mb-4" x-data="{ open: false }">
					<button type="button" class="btn btn-primary dropdown-toggle" @click="open = true">
						Dropdown button
					</button>
					<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute top-full min-w-40 mt-1 z-2 text-sm"
					x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
						<a class="py-2 px-5 block hover:bg-primary/10 hover:text-primary" 
							@click="open = false" href="javascript:void(0);">Action</a>
						<a class="py-2 px-5 block hover:bg-primary/10 hover:text-primary"
								@click="open = false" href="javascript:void(0);">Another action</a>
						<a class="py-2 px-5 block hover:bg-primary/10 hover:text-primary" 
							@click="open = false" href="javascript:void(0);">Something else here</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
														
													

														
<div x-data="{}" class="mb-3">
	<a class="btn btn-primary" href="javascript:void(0);"
		@click="$dispatch('offcanvas-ex3')">Enable both scrolling & backdrop</a>
</div>
<div x-data="{ offcanvas: false }">
	<div x-on:offcanvas-ex3.window="offcanvas = !offcanvas">
		<div class="fixed top-0 left-0 z-999 w-screen h-screen bg-black/50" x-show="offcanvas" @click="offcanvas = false"></div>
		<div class="fixed top-0 left-0 flex flex-col sm:w-100 w-87.5 h-screen z-9999 bg-card duration-500 ease-in-out offcanvas-wrapper -translate-x-full" x-show="offcanvas" :class="{ 'translate-x-0!': offcanvas }">
			<div class="flex items-center justify-between p-4">
				<h5 class="offcanvas-title">Offcanvas</h5>
				<button type="button" class="btn-close dark:invert" @click="offcanvas = false"></button>
			</div>
			<div class="p-4">
				<p class="mb-4">
					Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
				</p>
				<div class="relative mb-4" x-data="{ open: false }">
					<button type="button" class="btn btn-primary dropdown-toggle" @click="open = true">
						Dropdown button
					</button>
					<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute top-full min-w-40 mt-1 z-2 text-sm"
					x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
						<a class="py-2 px-5 block hover:bg-primary/10 hover:text-primary" 
							@click="open = false" href="javascript:void(0);">Action</a>
						<a class="py-2 px-5 block hover:bg-primary/10 hover:text-primary"
								@click="open = false" href="javascript:void(0);">Another action</a>
						<a class="py-2 px-5 block hover:bg-primary/10 hover:text-primary" 
							@click="open = false" href="javascript:void(0);">Something else here</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
														
													

														
<div x-data="{}" class="mb-3">
	<a class="btn btn-primary" href="javascript:void(0);"
		@click="$dispatch('offcanvas-ex4')">Toggle static offcanvas</a>
</div>
<div x-data="{ offcanvas: false }">
	<div x-on:offcanvas-ex4.window="offcanvas = !offcanvas">
		<div class="fixed top-0 left-0 z-999 w-screen h-screen bg-black/50" x-show="offcanvas"></div>
		<div class="fixed top-0 left-0 flex flex-col sm:w-100 w-87.5 h-screen z-9999 bg-card duration-500 ease-in-out offcanvas-wrapper -translate-x-full" x-show="offcanvas" :class="{ 'translate-x-0!': offcanvas }">
			<div class="flex items-center justify-between p-4">
				<h5 class="offcanvas-title">Offcanvas</h5>
				<button type="button" class="btn-close dark:invert" @click="offcanvas = false"></button>
			</div>
			<div class="p-4">
				<p class="mb-4">
					Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
				</p>
				<div class="relative mb-4" x-data="{ open: false }">
					<button type="button" class="btn btn-primary dropdown-toggle" @click="open = true">
						Dropdown button
					</button>
					<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute top-full min-w-40 mt-1 z-2 text-sm"
					x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
						<a class="py-2 px-5 block hover:bg-primary/10 hover:text-primary" 
							@click="open = false" href="javascript:void(0);">Action</a>
						<a class="py-2 px-5 block hover:bg-primary/10 hover:text-primary"
								@click="open = false" href="javascript:void(0);">Another action</a>
						<a class="py-2 px-5 block hover:bg-primary/10 hover:text-primary" 
							@click="open = false" href="javascript:void(0);">Something else here</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
														
													

														
															
<div x-data="{ offcanvas: false }">
	<div x-on:offcanvas-ex5.window="offcanvas = !offcanvas">
		<div class="fixed top-0 left-0 z-999 w-screen h-screen bg-black/50" x-show="offcanvas" x-transition.opacity.duration.300ms="" @click="offcanvas = false"></div>
		<div class="fixed top-0 left-0 flex flex-col w-full z-9999 bg-card duration-500 ease-in-out offcanvas-wrapper" x-show="offcanvas" x-transition:enter="transition transform ease-out duration-500" x-transition:enter-start="-translate-y-full" x-transition:enter-end="translate-y-0" x-transition:leave="transition transform ease-in duration-400" x-transition:leave-start="translate-y-0" x-transition:leave-end="-translate-y-full" x-cloak	>
			<div class="flex items-center justify-between p-4">
				<h5 class="offcanvas-title">Offcanvas Top</h5>
				<button type="button" class="btn-close dark:invert" @click="offcanvas = false"></button>
			</div>
			<div class="p-4">
				<p class="text-2xs mb-4">
					Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
				</p>
			</div>
		</div>
	</div>
</div>
<div x-data="{ offcanvas: false }">
	<div x-on:offcanvas-ex6.window="offcanvas = !offcanvas" id="offcanvasExample">
		<div class="fixed top-0 right-0 z-999 w-screen h-screen bg-black/50" x-show="offcanvas" x-transition.opacity.duration.300ms x-cloak @click="offcanvas = false"></div>
		<div class="fixed top-0 right-0 flex flex-col sm:w-100 w-87.5 h-screen z-9999 bg-card duration-500 ease-in-out offcanvas-wrapper" x-show="offcanvas" x-transition:enter="transition transform ease-out duration-500" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition transform ease-in duration-400" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full" x-cloak>
			<div class="flex items-center justify-between p-4">
				<h5 class="offcanvas-title">Offcanvas Right</h5>
				<button type="button" class="btn-close dark:invert" @click="offcanvas = false"></button>
			</div>
			<div class="p-4">
				<p class="text-2xs mb-4">
					Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
				</p>
				<div class="relative mb-4" x-data="{ open: false }">
					<button type="button" class="btn btn-primary dropdown-toggle" @click="open = true">
						Dropdown button
					</button>
					<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute top-full min-w-40 mt-1 z-2 text-sm"
					x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
						<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" 
							@click="open = false" href="javascript:void(0);">Action</a>
						<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary"
								@click="open = false" href="javascript:void(0);">Another action</a>
						<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" 
							@click="open = false" href="javascript:void(0);">Something else here</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div x-data="{ offcanvas: false }">
	<div x-on:offcanvas-ex7.window="offcanvas = !offcanvas">
		<div class="fixed bottom-0 left-0 z-999 w-screen h-screen bg-black/50" x-show="offcanvas" x-transition.opacity.duration.300ms="" @click="offcanvas = false"></div>
		<div class="fixed bottom-0 left-0 flex flex-col w-full z-9999 bg-card duration-500 ease-in-out offcanvas-wrapper" x-show="offcanvas" x-transition:enter="transition transform ease-out duration-500" x-transition:enter-start="translate-y-full" x-transition:enter-end="translate-y-0" x-transition:leave="transition transform ease-in duration-400" x-transition:leave-start="translate-y-0" x-transition:leave-end="translate-y-full" x-cloak>
			<div class="flex items-center justify-between p-4">
				<h5 class="offcanvas-title">Offcanvas Bottom</h5>
				<button type="button" class="btn-close dark:invert" @click="offcanvas = false"></button>
			</div>
			<div class="p-4">
				<p class="text-2xs mb-4">
					Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
				</p>
			</div>
		</div>
	</div>
</div>