Hi @strange burrow. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#vview transition
stark swiftBOT
Veo que estás trabajando con un menú móvil en Astro y quieres saber cómo implementarlo con Tailwind CSS y qué cambios hacer.
El código que muestras ya está utilizando algunas clases de Tailwind CSS para el menú móvil, y también está implementando eventos de Astro View Transitions para manejar el comportamiento del menú durante las transiciones de página.
Para implementar correctamente este menú móvil en Astro con Tailwind CSS, aquí están los cambios y mejoras que podrías hacer:
1. Configuración de Tailwind CSS en Astro
Primero, asegúrate de tener Tailwind CSS instalado en tu proyecto Astro:
npx astro add tailwind
O si prefieres instalarlo manualmente para Tailwind 3:
npm install tailwind@3 @astrojs/tailwind
Y configúralo en tu astro.config.mjs:
import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';
export default defineConfig({
integrations: [tailwind()],
});
2. Mejoras al botón de menú
<!-- Mobile toggle -->
<button
id="menu-toggle"
aria-label="Abrir menú"
class="md:hidden p-2 text-2xl focus:outline-none focus:ring-2 focus:ring-red-500 rounded-md"
>
☰
</button>
3. Mejoras al menú móvil
Tu menú móvil ya tiene buenas clases de Tailwind. Podrías considerar estas mejoras:
<!-- Mobile nav -->
<nav
id="mobile-menu"
data-opened="false"
class="fixed top-24 right-0 h-screen w-4/5 max-w-xs bg-red-950/95 backdrop-blur-md p-6 space-y-4 shadow-xl transform translate-x-full transition-transform duration-300 ease-in-out z-40 md:hidden overflow-y-auto"
>
<!-- Contenido del menú -->
</nav>
4. Script mejorado con soporte para View Transitions
Tu script ya está utilizando los eventos de Astro View Transitions (astro:page-load y astro:before-preparation), lo cual es excelente. Esto asegura que el menú funcione correctamente durante las transiciones de página.
<script>
function initMenu() {
const toggle = document.getElementById("menu-toggle");
const menu = document.getElementById("mobile-menu");
if (!toggle || !menu) return;
toggle.addEventListener("click", () => {
const isOpen = menu.classList.contains("translate-x-0");
// Cambiar el ícono del botón
toggle.textContent = isOpen ? "☰" : "✕";
toggle.setAttribute("aria-label", isOpen ? "Abrir menú" : "Cerrar menú");
// Animar el menú
menu.classList.toggle("translate-x-0");
menu.classList.toggle("translate-x-full");
// Actualizar el estado
menu.setAttribute("data-opened", (!isOpen).toString());
// Prevenir scroll cuando el menú está abierto
document.body.style.overflow = isOpen ? "" : "hidden";
});
}
// Inicializar el menú cuando la página se carga
document.addEventListener("astro:page-load", initMenu);
// Cerrar el menú antes de navegar a otra página
document.addEventListener("astro:before-preparation", () => {
const toggle = document.getElementById("menu-toggle");
const menu = document.getElementById("mobile-menu");
if (!toggle || !menu) return;
const isOpen = menu.getAttribute("data-opened") === "true";
if (!isOpen) return;
// Cerrar el menú
toggle.textContent = "☰";
toggle.setAttribute("aria-label", "Abrir menú");
menu.classList.add("translate-x-full");
menu.classList.remove("translate-x-0");
menu.setAttribute("data-opened", "false");
document.body.style.overflow = "";
});
</script>
Este código aprovecha los eventos del ciclo de vida de Astro View Transitions para asegurar que el menú móvil funcione correctamente durante las transiciones de página. El evento astro:page-load inicializa el menú cuando la página se carga, y el evento astro:before-preparation cierra el menú antes de navegar a otra página View Transitions Lifecycle Events.
Para más información sobre cómo funcionan los scripts con View Transitions en Astro, puedes consultar la documentación oficial sobre el comportamiento de scripts con View Transitions.