x

apps/website/src/app/[lang]/layout.tsx

@@ -0,0 +1,110 @@
+import type { Metadata } from 'next';
+import '../globals.css';
+import Navbar from '@/components/Navbar';
+import Footer from '@/components/Footer';
+import ClientProviders from '@/components/ClientProviders';
+import { API_BASE } from '@/lib/api';
+import type { MegaMenuPayload } from '@/components/navigation/menuTypes';
+import type { MenuItem, StoreSettings } from '@homaroma/types';
+
+export const metadata: Metadata = {
+  title: 'HomAroma',
+  description: 'Pure Origins, Artisan Craft, Zero Compromise',
+  metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'),
+};
+
+// Fetch categories for Navbar and Footer on the server
+async function getCategories(lang: string) {
+  try {
+    const res = await fetch(`${API_BASE}/categories?lang=${lang}`, { next: { revalidate: 3600 } });
+    if (!res.ok) return [];
+    return await res.json();
+  } catch (error) {
+    console.error('Failed to fetch categories in layout', error);
+    return [];
+  }
+}
+
+// Fetch mega menu on the server — eliminates client-side flash
+async function getMegaMenu(lang: string): Promise<MegaMenuPayload[]> {
+  try {
+    const res = await fetch(`${API_BASE}/menus/main?lang=${lang}`, { next: { revalidate: 300 } });
+    if (!res.ok) return [];
+    const data = await res.json() as { payload?: MegaMenuPayload[] };
+    return Array.isArray(data.payload) ? data.payload : [];
+  } catch (error) {
+    console.error('Failed to fetch mega menu in layout', error);
+    return [];
+  }
+}
+
+// Fetch footer menus (explore + support) on the server
+async function getFooterMenus(lang: string): Promise<{ exploreMenu: MenuItem[]; supportMenu: MenuItem[] }> {
+  const fetchMenu = async (slug: string): Promise<MenuItem[]> => {
+    try {
+      const res = await fetch(`${API_BASE}/menus/${slug}?lang=${lang}`, { next: { revalidate: 300 } });
+      if (!res.ok) return [];
+      const data = await res.json() as { items?: MenuItem[] };
+      return Array.isArray(data.items)
+        ? data.items.sort((a, b) => a.order - b.order)
+        : [];
+    } catch {
+      return [];
+    }
+  };
+
+  const [exploreMenu, supportMenu] = await Promise.all([
+    fetchMenu('footer-explore'),
+    fetchMenu('footer-support'),
+  ]);
+
+  return { exploreMenu, supportMenu };
+}
+
+// Fetch store settings (social links, footer texts) on the server
+async function getStoreSettings(lang: string): Promise<StoreSettings | null> {
+  try {
+    const res = await fetch(`${API_BASE}/settings?lang=${lang}`, { next: { revalidate: 600 } });
+    if (!res.ok) return null;
+    return await res.json() as StoreSettings;
+  } catch (error) {
+    console.error('Failed to fetch store settings in layout', error);
+    return null;
+  }
+}
+
+export default async function RootLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: Promise<{ lang: string }>;
+}) {
+  const { lang } = await params;
+  
+  const [categories, initialMenu, footerMenus, settings] = await Promise.all([
+    getCategories(lang),
+    getMegaMenu(lang),
+    getFooterMenus(lang),
+    getStoreSettings(lang),
+  ]);
+
+  return (
+    <html lang={lang} className="scroll-smooth">
+      <body className="min-h-screen bg-pop-bg text-pop-black font-sans antialiased">
+        <ClientProviders>
+          <Navbar categories={categories} initialMenu={initialMenu} settings={settings} />
+          <main className="global-main pt-[72px]">
+            {children}
+          </main>
+          <Footer
+            categories={categories}
+            exploreMenu={footerMenus.exploreMenu}
+            supportMenu={footerMenus.supportMenu}
+            settings={settings}
+          />
+        </ClientProviders>
+      </body>
+    </html>
+  );
+}