77 lines
3.8 KiB
Plaintext
77 lines
3.8 KiB
Plaintext
---
|
|
import Button from "./ui/Button.astro";
|
|
import { Icon } from "astro-icon/components";
|
|
|
|
import { createTranslator } from "../i18n/index.ts";
|
|
const tl = createTranslator(Astro.currentLocale);
|
|
const currentLocale = Astro.currentLocale;
|
|
|
|
const { locale } = Astro.params;
|
|
|
|
---
|
|
|
|
<div>
|
|
<div class="flex justify-between px-8 md:px-0 md:py-4">
|
|
<div class="border-l-4 border-colorPrimary pl-4">
|
|
<p class="font-secondary text-colorPrimary font-bold leading-none py-2 text-2xl md:text-lg">
|
|
<a href={`/${currentLocale}`}>{tl("nav.logo_line1")}<br/>{tl("nav.logo_line2")}</a>
|
|
</p>
|
|
</div>
|
|
<nav
|
|
class="flex justify-evenly gap-10 items-center uppercase text-md text-white"
|
|
>
|
|
<div class="hidden md:flex gap-8 font-primary font-bold">
|
|
<a class="hover:text-colorPrimary transition" href=`/${locale}#somos`>{tl("nav.about")}</a>
|
|
<a class="hover:text-colorPrimary transition" href=`/${locale}#programs`>{tl("nav.programs")}</a>
|
|
<a class="hover:text-colorPrimary transition" href=`/${locale}#news`>{tl("nav.news")}</a>
|
|
</div>
|
|
<div class="drawer lg:hidden">
|
|
<input id="my-drawer-1" type="checkbox" class="drawer-toggle" />
|
|
<div class="drawer-content">
|
|
<!-- Page content here -->
|
|
<label for="my-drawer-1" class="btn-ghost drawer-button"><Icon name="ph:list" class="text-white text-4xl font-bold" /></label>
|
|
</div>
|
|
<div class="drawer-side">
|
|
<label for="my-drawer-1" aria-label="close sidebar" class="drawer-overlay"></label>
|
|
<ul class="menu min-h-full w-80 p-4 bg-[url(/img/mid-logo-2.webp)] bg-no-repeat bg-contain bg-center bg-[#22523F] text-white">
|
|
<!-- Sidebar content here -->
|
|
<div class="flex gap-2 justify-center items-center mb-8 mt-8">
|
|
<img class="w-1/3 object-contain" src="/img/logo-metalico.webp" alt="Logo Centro del Reino de Paz y Justicia" />
|
|
<p class="font-secondary text-colorPrimary font-bold leading-none py-2 text-lg ">
|
|
<a href="/">{tl("nav.logo_line1")}<br/>{tl("nav.logo_line2")}</a>
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div class="font-primary font-bold flex flex-col gap-1 text-lg p-0">
|
|
<li><a><a class="hover:text-colorPrimary transition" href="#somos">{tl("nav.about")}</a></a></li>
|
|
<li><a><a class="hover:text-colorPrimary transition" href="#programs">{tl("nav.programs")}</a></a></li>
|
|
<li><a><a class="hover:text-colorPrimary transition" href="#news">{tl("nav.news")}</a></a></li>
|
|
</div>
|
|
<div class="w-50">
|
|
<Button class="px-8 py-2 uppercase text-lg mt-8" title={tl("nav.contact")} url="#contact" variant="primary" />
|
|
</div>
|
|
<div class="dropdown mt-10">
|
|
<div tabindex="0" role="button" class="btn-ghost m-1 cursor-pointer"><Icon name="ph:translate" class="text-2xl" /></div>
|
|
<ul tabindex="-1" class="dropdown-content text-tertiary text-lg bg-colorPrimary menu z-1 w-52 p-2 shadow-sm">
|
|
<li><a href="/es">🇪🇸 Español</a></li>
|
|
<li><a href="/en">🇬🇧 English</a></li>
|
|
</ul>
|
|
</div>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="w-50 hidden md:block">
|
|
<Button class="px-4 py-2 uppercase" title={tl("nav.contact")} url="#contact" variant="primary" />
|
|
</div>
|
|
<div class="dropdown dropdown-end lg:block hidden">
|
|
<div tabindex="0" role="button" class="btn-ghost m-1 cursor-pointer"><Icon name="ph:translate" class="text-2xl" /></div>
|
|
<ul tabindex="-1" class="dropdown-content text-tertiary text-lg bg-colorPrimary menu z-1 w-52 p-2 shadow-sm">
|
|
<li><a href="/es">🇪🇸 Español</a></li>
|
|
<li><a href="/en">🇬🇧 English</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|