From ade64c43f23d97888fabc49f0795d731c6f94614 Mon Sep 17 00:00:00 2001
From: Aarush Gupta <aarushgupta289@gmail.com>
Date: Sat, 6 Jun 2026 02:43:12 +0530
Subject: [PATCH] fix: wrap dynamic components in Suspense to fix build and add
 My Bookings to Navbar

---
 app/layout.tsx        | 65 ++++++++++++++++++++++++++++---------------
 components/Navbar.tsx | 10 +++++++
 2 files changed, 52 insertions(+), 23 deletions(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index c0133c8..7513992 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -5,6 +5,7 @@ import LightRays from "../components/LightRays";
 import Navbar from "../components/Navbar";
 import { PostHogProvider } from "./providers";
 import { Toaster } from "sonner";
+import { Suspense } from "react";
 
 const SchibstedGrotesk = Schibsted_Grotesk({
   variable: "--font-schibsted-grotesk",
@@ -32,29 +33,47 @@ export default function RootLayout({
         className={`${SchibstedGrotesk.variable} ${MartianMono.variable} antialiased`}
       >
         <Toaster richColors position="top-right" />
-        <PostHogProvider>
-          <Navbar />
-          <div className="absolute inset-0 top-0 z-[-1] min-h-screen">
-            <LightRays
-              raysOrigin="top-center-offset"
-              raysColor="#5dfeca"
-              raysSpeed={0.5}
-              lightSpread={0.9}
-              rayLength={1.4}
-              followMouse={true}
-              mouseInfluence={0.02}
-              noiseAmount={0}
-              distortion={0}
-              className="custom-rays"
-              pulsating={false}
-              fadeDistance={1}
-              saturation={1}
-            />
-          </div>
-          <main>
-            {children}
-          </main>
-        </PostHogProvider>
+        <Suspense fallback={null}>
+          <PostHogProvider>
+            <Suspense fallback={
+              <header className="glass sticky top-0 z-50">
+                <nav className="flex flex-row justify-between mx-auto container sm:px-10 px-5 py-4">
+                  <div className="logo flex flex-row items-center gap-2">
+                    <img src="/icons/logo.png" alt="logo" width={24} height={24} />
+                    <p className="text-xl font-bold italic max-sm:hidden">DevEvent</p>
+                  </div>
+                  <ul className="flex items-center gap-8 list-none text-white">
+                    <li>Home</li>
+                    <li>Events</li>
+                    <li>Create Event</li>
+                  </ul>
+                </nav>
+              </header>
+            }>
+              <Navbar />
+            </Suspense>
+            <div className="absolute inset-0 top-0 z-[-1] min-h-screen">
+              <LightRays
+                raysOrigin="top-center-offset"
+                raysColor="#5dfeca"
+                raysSpeed={0.5}
+                lightSpread={0.9}
+                rayLength={1.4}
+                followMouse={true}
+                mouseInfluence={0.02}
+                noiseAmount={0}
+                distortion={0}
+                className="custom-rays"
+                pulsating={false}
+                fadeDistance={1}
+                saturation={1}
+              />
+            </div>
+            <main>
+              {children}
+            </main>
+          </PostHogProvider>
+        </Suspense>
       </body>
     </html>
   );
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 8b7c77c..7b022bb 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -57,6 +57,16 @@ const navLinkClass = (href: string) =>
               Create Event
             </Link>
           </li>
+
+  <li>
+            <Link
+              href="/my-bookings"
+              aria-current={pathname === "/my-bookings" ? "page" : undefined}
+              className={navLinkClass("/my-bookings")}
+            >
+              My Bookings
+            </Link>
+          </li>
 </ul>
     </nav>
    </header>