import type { Metadata, Viewport } from "next"; import { notFound } from "next/navigation"; import { montserrat, shamel } from "@/lib/fonts"; import { locales, isLocale } from "@/content/types"; import { getDictionary } from "@/content"; import { Header } from "@/components/layout/Header"; import { Footer } from "@/components/layout/Footer"; import "../globals.css"; export function generateStaticParams() { return locales.map((locale) => ({ locale })); } export const viewport: Viewport = { colorScheme: "light", }; export async function generateMetadata({ params, }: { params: Promise<{ locale: string }>; }): Promise { const { locale: rawLocale } = await params; const dict = getDictionary(isLocale(rawLocale) ? rawLocale : "en"); return { title: dict.meta.title, description: dict.meta.description, }; } export default async function LocaleLayout({ children, params, }: { children: React.ReactNode; params: Promise<{ locale: string }>; }) { const { locale: rawLocale } = await params; if (!isLocale(rawLocale)) { notFound(); } const locale = rawLocale; const dict = getDictionary(locale); const dir = locale === "ar" ? "rtl" : "ltr"; return ( // `dir` is intentionally NOT set here. Safari/WebKit has a long-standing bug where // an RTL element (the document's scrolling root) shifts the coordinate origin // used for `position: fixed` elements whenever the page has any horizontal scroll // capability at all, misaligning fixed headers/overlays from the real screen edge. // Keeping the scrolling root LTR and applying `dir` on instead sidesteps that // bug entirely while every actual bit of content still renders correctly mirrored.

{children}