LLC/src/app/[locale]/layout.jsx

104 lines
2.5 KiB
JavaScript

import { NextIntlClientProvider } from "next-intl";
import { getLocale, getMessages } from "next-intl/server";
import { notFound } from "next/navigation";
import { routing } from "src/i18n/routing";
import "../../styles/globals.css";
import Navbar from "src/components/NavBar";
import Footer from "src/view/Landing/components/Footer";
import { ToastContainer } from 'react-toastify';
import graphql from "src/utils/graphql";
import { Rubik, Roboto } from "next/font/google";
const gql = `
query Navbars($locale: I18NLocaleCode) {
navbars(locale: $locale, sort: ["order:asc"]) {
documentId
title
link
children {
id
title
link
}
}
}
`
const rubik = Rubik({
subsets: ["arabic"],
weight: ["400", "700"],
variable: "--font-rubik", // This will create a CSS variable for easy use
});
const roboto = Roboto({
subsets: ["latin"],
weight: ["400", "700"],
variable: "--font-roboto", // Create a CSS variable for Roboto
});
const fetchNavbarItems = async () => {
const locale = await getLocale()
const { navbars } = await graphql(gql, {
locale: locale
})
return navbars
}
// app/[locale]/page.js
export const generateMetadata = async ({ params }) => {
const { locale } = await params
const t = await getMessages(locale)
// Define titles and descriptions for each locale
return {
title: t.HomePage.SEO.title,
description: t.HomePage.SEO.descriptions,
};
};
export const viewport = {
width: 'device-width',
initialScale: 1,
maximumScale: 1,
userScalable: false,
// Also supported but less commonly used
// interactiveWidget: 'resizes-visual',
}
export default async function LocaleLayout({
children,
params
}) {
const { locale } = await params
const navbaritems = await fetchNavbarItems()
// Ensure that the incoming `locale` is valid
if (!routing.locales.includes(locale)) {
notFound();
}
// Providing all messages to the client
// side is the easiest way to get started
const messages = await getMessages();
return (
<html lang={locale} dir={locale === "en" ? "ltr" : "rtl"}>
<head>
<meta name="apple-mobile-web-app-title" content="AdHorizonIntl" />
</head>
<body className={`${rubik.variable} ${roboto.variable} `} suppressHydrationWarning>
<NextIntlClientProvider messages={messages}>
<Navbar items={navbaritems} />
{children}
<Footer />
<ToastContainer />
</NextIntlClientProvider>
</body>
</html>
);
}