Sheet

---
import GithubIcon from "@/components/icons/github.astro"
import Menu from "@/components/ui/sheet.astro"
---

<header
	class="flex h-12 w-full items-center justify-between rounded-md border border-neutral-800 p-4">
	<span class="text-lg font-bold">LOGO</span>
	<div class="flex items-center gap-4">
		<a
			class="text-neutral-400 transition-colors duration-300 ease-in-out hover:text-neutral-100"
			href="http://github.com/Alexisxde/astro-ui-kit">
			<GithubIcon class="size-5" />
		</a>
		<Menu>Menu example</Menu>
	</div>
</header>

Instalación

Copie el siguiente codigo, cree un archivo en src/components/ui/sheet.astro y peguelo ahí.

---
import { cn } from "@/lib/utils"
import type { HTMLAttributes } from "astro/types"

interface Props extends HTMLAttributes<"aside"> {
	title: string
}

const { title = "Example", class: className, ...rest } = Astro.props
---

<div
	id="background-menu"
	class="inset-0 z-50 hidden bg-[rgba(0,0,0,0.1)] backdrop-blur-sm transition duration-200 ease-in-out">
</div>
<aside
	id="menu"
	class={cn(
		"fixed top-0 right-0 bottom-0 z-50 h-dvh w-full max-w-sm border-r-1 translate-x-[200%] border-neutral-200 bg-neutral-100 transition-transform duration-150 ease-in-out dark:border-neutral-800 dark:bg-neutral-900",
		className
	)}
	{...rest}>
	<div
		class="relative flex items-center justify-between border-b-1 border-neutral-800 p-4">
		<h3 class="m-1! text-lg font-medium">{title}</h3>
		<button
			id="btn-close"
			class="inline-flex cursor-pointer items-center rounded-md p-1 text-sm text-neutral-900 transition-colors duration-200 ease-in-out hover:bg-neutral-200 focus:outline-none dark:bg-neutral-900 dark:text-neutral-100 dark:hover:bg-neutral-800">
			<svg
				xmlns="http://www.w3.org/2000/svg"
				fill="none"
				viewBox="0 0 24 24"
				stroke-width="1.5"
				stroke="currentColor"
				class="size-6">
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					d="M6 18 18 6M6 6l12 12"></path>
			</svg>
		</button>
	</div>
	<div class="p-4">
		<slot />
	</div>
</aside>

<button
	id="btn-open"
	class="inline-flex cursor-pointer items-center rounded-md p-1 text-sm text-neutral-900 transition-colors duration-200 ease-in-out hover:bg-neutral-200 focus:outline-none dark:bg-neutral-900 dark:text-neutral-100 dark:hover:bg-neutral-800">
	<svg
		xmlns="http://www.w3.org/2000/svg"
		fill="none"
		viewBox="0 0 24 24"
		stroke-width="1.5"
		stroke="currentColor"
		class="size-6">
		<path
			stroke-linecap="round"
			stroke-linejoin="round"
			d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path>
	</svg>
</button>

<script>
	import { $ } from "@/lib/dom-selector"

	const $openMenu = $("#btn-open")
	const $closeMenu = $("#btn-close")
	const $background = $("#background-menu")
	const $menu = $("#menu")

	$openMenu?.addEventListener("click", () => {
		$background?.classList.replace("hidden", "fixed")
		$menu?.classList.replace("translate-x-[200%]", "translate-x-0")
	})
	$closeMenu?.addEventListener("click", () => {
		$background?.classList.replace("fixed", "hidden")
		$menu?.classList.replace("translate-x-0", "translate-x-[200%]")
	})
</script>

Importación

---
import Sheet from "@/components/ui/sheet.astro"
---

Para usar los alias ”@/” configure su archivo ts.config.json Mirar como configurar aquí

Component API

Input