58 lines
2.5 KiB
Text
58 lines
2.5 KiB
Text
|
---
|
||
|
|
interface Props {
|
||
|
|
lang: 'es' | 'en';
|
||
|
|
}
|
||
|
|
|
||
|
|
const { lang } = Astro.props;
|
||
|
|
const currentPath = Astro.url.pathname;
|
||
|
|
---
|
||
|
|
|
||
|
|
<header class="flex items-center justify-between px-10 py-5 border-b border-line">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<img src="/ornito_logo.png" alt="Ornitonautas" class="w-[42px] h-[42px] object-contain" />
|
||
|
|
<div>
|
||
|
|
<div class="font-heading font-bold text-[19px] tracking-tight">Ornitonautas</div>
|
||
|
|
<div class="text-[11px] text-text-muted tracking-wide">Aprende. Practica. Despega.</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<nav class="hidden md:flex items-center gap-8 text-[14.5px] font-semibold">
|
||
|
|
<a href="/campus/" class={`transition-colors hover:text-orange ${currentPath.includes('/campus') ? 'text-orange' : 'text-text'}`}>FP España</a>
|
||
|
|
<a href="/aprendizaje/" class={`transition-colors hover:text-orange ${currentPath.includes('/aprendizaje') ? 'text-orange' : 'text-text'}`}>Rutas</a>
|
||
|
|
<a href="/comunidad/" class={`transition-colors hover:text-orange ${currentPath.includes('/comunidad') ? 'text-orange' : 'text-text'}`}>Recursos</a>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<div class="flex items-center gap-3.5">
|
||
|
|
<a href="/contacto/" class="hidden sm:inline text-sm font-semibold text-text hover:text-orange transition-colors">Iniciar sesión</a>
|
||
|
|
<a href="/campus/" class="bg-orange text-white font-bold text-sm py-[11px] px-5 rounded-[10px] hover:bg-orange-ink transition-colors">
|
||
|
|
Explorar FP
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="md:hidden p-2 text-text hover:text-orange"
|
||
|
|
aria-label="Abrir menú"
|
||
|
|
id="mobile-menu-button"
|
||
|
|
>
|
||
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="md:hidden hidden px-10 py-4 border-b border-line" id="mobile-menu">
|
||
|
|
<nav class="flex flex-col gap-2 text-sm font-semibold">
|
||
|
|
<a href="/campus/" class="py-2 px-4 rounded-lg hover:bg-mist transition-colors">FP España</a>
|
||
|
|
<a href="/aprendizaje/" class="py-2 px-4 rounded-lg hover:bg-mist transition-colors">Rutas</a>
|
||
|
|
<a href="/comunidad/" class="py-2 px-4 rounded-lg hover:bg-mist transition-colors">Recursos</a>
|
||
|
|
<a href="/contacto/" class="py-2 px-4 rounded-lg hover:bg-mist transition-colors">Iniciar sesión</a>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const button = document.getElementById('mobile-menu-button');
|
||
|
|
const menu = document.getElementById('mobile-menu');
|
||
|
|
button?.addEventListener('click', () => menu?.classList.toggle('hidden'));
|
||
|
|
</script>
|