b8906efc80
Some checks failed
ci / ci (22, ubuntu-latest) (push) Has been cancelled
Nuxt 4 + Supabase + Flightics API. Incluye búsqueda de vuelos, inspiraciones, watchlist, tracking de precios y mapa interactivo. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
113 lines
3.0 KiB
Vue
113 lines
3.0 KiB
Vue
<script setup>
|
|
useHead({
|
|
meta: [
|
|
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }
|
|
],
|
|
link: [
|
|
{ rel: 'icon', href: '/favicon.ico' }
|
|
],
|
|
htmlAttrs: {
|
|
lang: 'es'
|
|
}
|
|
})
|
|
|
|
useSeoMeta({
|
|
title: 'Vuelato - Busca vuelos baratos',
|
|
description: 'Buscador de vuelos con fechas flexibles'
|
|
})
|
|
|
|
const mobileMenu = ref(false)
|
|
|
|
const navLinks = [
|
|
{ to: '/search', label: 'Buscar', icon: 'i-lucide-search' },
|
|
{ to: '/explore', label: 'Explorar', icon: 'i-lucide-compass' },
|
|
{ to: '/multi-city', label: 'Multi-city', icon: 'i-lucide-route' },
|
|
{ to: '/tracking', label: 'Seguimiento', icon: 'i-lucide-bell' },
|
|
{ to: '/watchlist', label: 'Watchlist', icon: 'i-lucide-heart' }
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<UApp>
|
|
<UHeader>
|
|
<template #left>
|
|
<NuxtLink to="/" class="font-bold text-lg">
|
|
Vuelato
|
|
</NuxtLink>
|
|
<nav class="hidden md:flex items-center gap-1 ml-4">
|
|
<UButton
|
|
v-for="link in navLinks"
|
|
:key="link.to"
|
|
:to="link.to"
|
|
:label="link.label"
|
|
variant="ghost"
|
|
color="neutral"
|
|
size="sm"
|
|
/>
|
|
</nav>
|
|
</template>
|
|
|
|
<template #right>
|
|
<AuthUserMenu />
|
|
<UColorModeButton />
|
|
<!-- Mobile menu button -->
|
|
<UButton
|
|
class="md:hidden"
|
|
:icon="mobileMenu ? 'i-lucide-x' : 'i-lucide-menu'"
|
|
color="neutral"
|
|
variant="ghost"
|
|
@click="mobileMenu = !mobileMenu"
|
|
/>
|
|
</template>
|
|
</UHeader>
|
|
|
|
<!-- Mobile nav -->
|
|
<Transition
|
|
enter-active-class="transition-all duration-200 ease-out"
|
|
enter-from-class="opacity-0 -translate-y-2"
|
|
enter-to-class="opacity-100 translate-y-0"
|
|
leave-active-class="transition-all duration-150 ease-in"
|
|
leave-from-class="opacity-100 translate-y-0"
|
|
leave-to-class="opacity-0 -translate-y-2"
|
|
>
|
|
<div v-if="mobileMenu" class="md:hidden border-b border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-950 px-4 py-3">
|
|
<nav class="flex flex-col gap-1">
|
|
<UButton
|
|
v-for="link in navLinks"
|
|
:key="link.to"
|
|
:to="link.to"
|
|
:label="link.label"
|
|
:icon="link.icon"
|
|
variant="ghost"
|
|
color="neutral"
|
|
block
|
|
class="justify-start"
|
|
@click="mobileMenu = false"
|
|
/>
|
|
</nav>
|
|
</div>
|
|
</Transition>
|
|
|
|
<UMain>
|
|
<NuxtPage />
|
|
</UMain>
|
|
|
|
<USeparator />
|
|
|
|
<UFooter>
|
|
<template #left>
|
|
<p class="text-sm text-muted">
|
|
Vuelato © {{ new Date().getFullYear() }}
|
|
</p>
|
|
</template>
|
|
<template #right>
|
|
<div class="flex gap-3 text-sm text-muted">
|
|
<NuxtLink to="/search">Buscar</NuxtLink>
|
|
<NuxtLink to="/explore">Explorar</NuxtLink>
|
|
<NuxtLink to="/multi-city">Multi-city</NuxtLink>
|
|
</div>
|
|
</template>
|
|
</UFooter>
|
|
</UApp>
|
|
</template>
|