sharper.ly/apps/web/app/components/ui/Navigation/nav-items.ts

/* ============================================================================
   DEFAULT INFORMATION ARCHITECTURE
   ----------------------------------------------------------------------------
   The ten top-level destinations from the Figma navigation (frame 20:236) and
   ToR 3.2. The app shell normally feeds `items` to <Navigation /> from the
   Strapi site-settings single type; this module is the typed fallback that
   renders when Strapi has not been wired yet.

   It does NOT own the slugs: ~/lib/route-slugs is the one table the route
   config is built from, and `NAV_PATHS` below is constrained to it.

   Arabic copy is taken verbatim from the Arabic mega-menu frame (334:639).
   ========================================================================= */

import type { RouteSlugKey, RouteSlugs } from "~/lib/route-slugs";

import { buildLocalizedHref, type Locale } from "../LanguageSwitcher";

import type { NavItem, NavigationStrings, NavigationStringsByLocale } from "./types";

/**
 * Unprefixed route paths. Both locales share the Latin slugs; the locale lives
 * in the prefix (/en/contact, /ar/contact), never in the slug.
 *
 * The `satisfies` clause pins every entry to the slug `ROUTE_SLUGS` registers
 * the route under - home's empty slug yielding "/" - so this table cannot
 * drift away from the URLs the app actually serves, and cannot gain or lose a
 * section without ~/lib/route-slugs gaining or losing one first.
 */
export const NAV_PATHS = {
  home: "/",
  about: "/about",
  whatWeDo: "/what-we-do",
  activities: "/activities-and-initiatives",
  events: "/events-calendar",
  applications: "/applications-and-opportunities",
  news: "/news-and-updates",
  contact: "/contact",
  resources: "/resources-and-publications",
  knowledgeHub: "/knowledge-hub",
} as const satisfies { readonly [K in RouteSlugKey]: `/${RouteSlugs[K]}` };

export type NavPathKey = keyof typeof NAV_PATHS;

type LabelKey =
  | NavPathKey
  | "aboutAndStrategy"
  | "engagementAndOpportunities"
  | "knowledgeAndImpact";

const LABELS: Record<Locale, Record<LabelKey, string>> = {
  en: {
    home: "Home",
    aboutAndStrategy: "About and Strategy",
    about: "About",
    whatWeDo: "What We Do",
    activities: "Activities and Initiatives",
    engagementAndOpportunities: "Engagement and Opportunities",
    events: "Events Calendar",
    applications: "Applications and Opportunities",
    news: "News and Updates",
    contact: "Contact",
    knowledgeAndImpact: "Knowledge and Impact",
    resources: "Resources and Publications",
    knowledgeHub: "Knowledge Hub",
  },
  ar: {
    home: "الرئيسية",
    aboutAndStrategy: "عن المشروع والاستراتيجية",
    about: "عن المشروع",
    whatWeDo: "ماذا نفعل",
    activities: "الأنشطة والمبادرات",
    engagementAndOpportunities: "المشاركة والفرص",
    events: "تقويم الفعاليات",
    applications: "التطبيقات والفرص",
    news: "الأخبار والمستجدات",
    contact: "اتصل بنا",
    knowledgeAndImpact: "المعرفة والتأثير",
    resources: "الموارد والمنشورات",
    knowledgeHub: "مركز المعرفة",
  },
};

/**
 * The default navigation for a locale, with every href already prefixed.
 * Returns a fresh array so a caller may safely sort or splice it.
 */
export function getDefaultNavItems(locale: Locale): NavItem[] {
  const label = LABELS[locale];
  const href = (key: NavPathKey) => buildLocalizedHref(NAV_PATHS[key], locale);

  return [
    { id: "home", label: label.home, href: href("home") },
    {
      id: "about-and-strategy",
      label: label.aboutAndStrategy,
      children: [
        { id: "about", label: label.about, href: href("about") },
        { id: "what-we-do", label: label.whatWeDo, href: href("whatWeDo") },
        { id: "activities", label: label.activities, href: href("activities") },
      ],
    },
    {
      id: "engagement-and-opportunities",
      label: label.engagementAndOpportunities,
      children: [
        { id: "events", label: label.events, href: href("events") },
        { id: "applications", label: label.applications, href: href("applications") },
        { id: "news", label: label.news, href: href("news") },
        { id: "contact", label: label.contact, href: href("contact") },
      ],
    },
    {
      id: "knowledge-and-impact",
      label: label.knowledgeAndImpact,
      children: [
        { id: "resources", label: label.resources, href: href("resources") },
        { id: "knowledge-hub", label: label.knowledgeHub, href: href("knowledgeHub") },
      ],
    },
  ];
}

/**
 * EU visibility is mandatory on every page. "Funded by the European Union" is
 * the prescribed wording; the Figma text layer reads "European nation", which
 * is a typo in the design file and is corrected here.
 */
export const NAVIGATION_STRINGS: NavigationStringsByLocale = {
  en: {
    primaryNavLabel: "Main navigation",
    openMenu: "Open menu",
    closeMenu: "Close menu",
    homeLinkLabel: "SHARP-ER home",
    languageMenuLabel: "Language",
    euStatement: "Funded by the European Union",
    euEmblemAlt: "",
  },
  ar: {
    primaryNavLabel: "التنقل الرئيسي",
    openMenu: "فتح القائمة",
    closeMenu: "إغلاق القائمة",
    homeLinkLabel: "الصفحة الرئيسية لمشروع SHARP-ER",
    languageMenuLabel: "اللغة",
    euStatement: "بتمويل من الاتحاد الأوروبي",
    euEmblemAlt: "",
  },
};

export function getNavigationStrings(
  locale: Locale,
  overrides?: Partial<NavigationStrings>,
): NavigationStrings {
  return { ...NAVIGATION_STRINGS[locale], ...overrides };
}