cdrdpyj/src/components/Header.astro

---
import Button from "./ui/Button.astro";
import { Icon } from "astro-icon/components";

import { getCollection } from "astro:content";
import { createTranslator, routeTranslations } from "../i18n/index.ts";

const allNews = await getCollection("news");

const tl = createTranslator(Astro.currentLocale);
const currentLocale = Astro.currentLocale;
const currentPath = Astro.url.pathname;

function translatePath(newLocale: string) {
  const segments = currentPath.split("/").filter(Boolean);

  if (segments.length === 0) return `/${newLocale}`;

  const remainingSegments = segments.slice(1);
  const newsRouteNames = Object.values(routeTranslations.news);

  const translatedSegments = remainingSegments.map((segment) => {
    for (const key in routeTranslations) {
      const translations =
        routeTranslations[key as keyof typeof routeTranslations];
      if (Object.values(translations).includes(segment)) {
        return translations[newLocale as keyof typeof translations] || segment;
      }
    }
    return segment;
  });

  // Lógica para noticias
  if (segments.length >= 2 && newsRouteNames.includes(segments[1])) {
    const isDetail = segments.length >= 3;

    if (isDetail) {
      const currentId = segments[segments.length - 1];
      const baseId = currentId.split("/").pop();

      const exists = allNews.some(
        (post) => post.id.endsWith(baseId!) && post.data.locale === newLocale
      );

      if (!exists) {
        // Redirigir al home de noticias si no existe la traducción
        return `/${newLocale}/${translatedSegments[0]}`;
      }

      // Reconstruir ID con el nuevo locale
      const newId = `${newLocale}/${baseId}`;
      return `/${newLocale}/${translatedSegments[0]}/${newId}`;
    }
  }

  return `/${[newLocale, ...translatedSegments].join("/")}`;
}

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={`/${currentLocale}#somos`}
          >{tl("nav.about")}
        </a>
        <a
          class="hover:text-colorPrimary transition"
          href={`/${currentLocale}#programs`}
          >{tl("nav.programs")}
        </a>
        <a
          class="hover:text-colorPrimary transition"
          href={`/${currentLocale}#news`}
          >{tl("nav.news")}
        </a>
        <!-- <a class="hover:text-colorPrimary transition" href={`/${currentLocale}/archive`}>{tl("nav.archive")}</a>
        <a class="hover:text-colorPrimary transition" href={`/${currentLocale}/nations`}>{tl("nav.nations")}</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/opacity-logo.png)] 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>

            <ul class="font-primary font-bold flex flex-col gap-1 text-lg p-0">
              <li>
                <a class="hover:text-colorPrimary transition" href="#somos"
                  >{tl("nav.about")}
                </a>
              </li>
              <li>
                <a class="hover:text-colorPrimary transition" href="#programs"
                  >{tl("nav.programs")}
                </a>
              </li>
              <li>
                <a class="hover:text-colorPrimary transition" href="#news"
                  >{tl("nav.news")}
                </a>
              </li>
            </ul>
            <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={translatePath("es")}
                    ><Icon name="icon_flag_es" /> Español</a
                  >
                </li>
                <li>
                  <a href={translatePath("en")}
                    ><Icon name="icon_flag_uk" /> English</a
                  >
                </li>
                <li>
                  <a href={translatePath("he")}
                    ><Icon name="flagpack--il" /> עברית</a
                  >
                </li>
                <li>
                  <a href={translatePath("pt")}
                    ><Icon name="flagpack--br" /> Português</a
                  >
                </li>
                <li>
                  <a href={translatePath("fr")}
                    ><Icon name="flagpack--fr" /> Français</a
                  >
                </li>
                <li>
                  <a href={translatePath("ru")}
                    ><Icon name="flagpack--ru" /> Русский</a
                  >
                </li>
                <li>
                  <a href={translatePath("rw")}
                    ><Icon name="flagpack--rw" /> Kinyarwanda</a
                  >
                </li>
                <li><a href={translatePath("kr")}>Kreole</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={translatePath("es")}
              ><Icon name="icon_flag_es" /> Español</a
            >
          </li>
          <li>
            <a href={translatePath("en")}
              ><Icon name="icon_flag_uk" /> English</a
            >
          </li>
          <li>
            <a href={translatePath("he")}><Icon name="flagpack--il" /> עברית</a>
          </li>
          <li>
            <a href={translatePath("pt")}
              ><Icon name="flagpack--br" /> Português</a
            >
          </li>
          <li>
            <a href={translatePath("fr")}
              ><Icon name="flagpack--fr" /> Français</a
            >
          </li>
          <li>
            <a href={translatePath("ru")}
              ><Icon name="flagpack--ru" /> Русский</a
            >
          </li>
          <li>
            <a href={translatePath("rw")}
              ><Icon name="flagpack--rw" /> Kinyarwanda</a
            >
          </li>
          <li><a href={translatePath("kr")}>Kreole</a></li>
        </ul>
      </div>
    </nav>
  </div>
</div>