feat: Update NavigationBar to accept host as a prop and wrap in Suspense

app/(home)/layout.tsx

@@ -1,7 +1,9 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
+import { headers } from "next/headers";
 import Image from "next/image";
 import Link from "next/link";
+import { Suspense } from "react";
 import { ToastContainer, Zoom } from "react-toastify";
 import NavigationBar from "../_components/NavigationBar";
 import "../globals.css";
@@ -75,6 +77,8 @@ export default async function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const domain = (await headers()).get("host");
+
   const contactInfo = [
     {
       icon: "/Message.svg",
@@ -114,8 +118,9 @@ export default async function RootLayout({
               />
             </Link>
           </section>
-
-          <NavigationBar />
+          <Suspense>
+            <NavigationBar host={domain ?? "opplens.com"} />
+          </Suspense>
         </header>
 
         <ToastContainer

app/_components/NavigationBar.tsx

@@ -2,14 +2,15 @@
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 
-const NavigationBar = () => {
+const NavigationBar = ({ host }: { host: string }) => {
   const pathname = usePathname();
+
   return (
     <nav className="my-5">
       <ul className="flex flex-row-reverse items-center gap-12">
         <li>
           <Link
-            href={"https://app.opplens.com"}
+            href={`https://app.${host}`}
             className="cursor-pointer bg-(--primary) text-white py-5 px-12 rounded-full"
             target="_blank">
             Login