realproject7 · realproject7 · Mar 15, 2026 · Mar 15, 2026
diff --git a/src/app/chain/page.tsx b/src/app/chain/page.tsx
@@ -3,7 +3,6 @@
 import { useState } from "react";
 import { useAccount } from "wagmi";
 import { useQuery } from "@tanstack/react-query";
-import { ConnectWallet } from "../../components/ConnectWallet";
 import {
   validateContentLength,
   MIN_CONTENT_LENGTH,
@@ -61,7 +60,6 @@ export default function ChainPlotPage() {
         <p className="text-muted text-sm">
           Connect your wallet to chain a plot.
         </p>
-        <ConnectWallet />
       </div>
     );
   }

diff --git a/src/app/create/page.tsx b/src/app/create/page.tsx
@@ -2,7 +2,6 @@
 
 import { useState } from "react";
 import { useAccount } from "wagmi";
-import { ConnectWallet } from "../../components/ConnectWallet";
 import {
   validateContentLength,
   MIN_CONTENT_LENGTH,
@@ -43,7 +42,6 @@ export default function CreateStorylinePage() {
         <p className="text-muted text-sm">
           Connect your wallet to create a storyline.
         </p>
-        <ConnectWallet />
       </div>
     );
   }

diff --git a/src/app/dashboard/reader/page.tsx b/src/app/dashboard/reader/page.tsx
@@ -4,7 +4,6 @@ import { useEffect, useState } from "react";
 import { useAccount } from "wagmi";
 import { useQuery } from "@tanstack/react-query";
 import { supabase, type Donation } from "../../../../lib/supabase";
-import { ConnectWallet } from "../../../components/ConnectWallet";
 import { ReaderPortfolio } from "../../../components/ReaderPortfolio";
 import { formatUnits } from "viem";
 
@@ -57,7 +56,6 @@ export default function ReaderDashboard() {
         <p className="text-muted text-sm">
           Connect your wallet to view your dashboard.
         </p>
-        <ConnectWallet />
       </div>
     );
   }

diff --git a/src/app/dashboard/writer/page.tsx b/src/app/dashboard/writer/page.tsx
@@ -3,7 +3,6 @@
 import { useAccount } from "wagmi";
 import { useQuery } from "@tanstack/react-query";
 import { supabase, type Storyline } from "../../../../lib/supabase";
-import { ConnectWallet } from "../../../components/ConnectWallet";
 import { DeadlineCountdown } from "../../../components/DeadlineCountdown";
 import { ClaimRoyalties } from "../../../components/ClaimRoyalties";
 import { WriterTradingStats } from "../../../components/WriterTradingStats";
@@ -40,7 +39,6 @@ export default function WriterDashboard() {
         <p className="text-muted text-sm">
           Connect your wallet to view your dashboard.
         </p>
-        <ConnectWallet />
       </div>
     );
   }

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Geist_Mono } from "next/font/google";
 import { Providers } from "./providers";
+import { NavBar } from "../components/NavBar";
 import "./globals.css";
 
 const geistMono = Geist_Mono({
@@ -21,7 +22,10 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={`${geistMono.variable} antialiased`}>
-        <Providers>{children}</Providers>
+        <Providers>
+          <NavBar />
+          <div className="pt-11">{children}</div>
+        </Providers>
       </body>
     </html>
   );

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,11 +1,6 @@
-import { ConnectWallet } from "@/components/ConnectWallet";
-
 export default function Home() {
   return (
     <div className="flex min-h-screen flex-col items-center justify-center px-6">
-      <header className="fixed top-0 right-0 p-4">
-        <ConnectWallet />
-      </header>
       <main className="flex flex-col items-center gap-6 text-center">
         <h1 className="text-accent text-2xl font-bold tracking-tight">
           PlotLink

diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
@@ -0,0 +1,98 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { ConnectWallet } from "./ConnectWallet";
+
+const NAV_LINKS = [
+  { href: "/discover", label: "discover" },
+  { href: "/create", label: "create" },
+  { href: "/dashboard/writer", label: "writer" },
+  { href: "/dashboard/reader", label: "reader" },
+  { href: "/chain", label: "chain" },
+] as const;
+
+export function NavBar() {
+  const pathname = usePathname();
+  const [mobileOpen, setMobileOpen] = useState(false);
+
+  return (
+    <nav className="fixed top-0 right-0 left-0 z-50 border-b border-[var(--border)] bg-[var(--bg)]/95 backdrop-blur-sm">
+      <div className="mx-auto flex h-11 max-w-5xl items-center justify-between px-4">
+        {/* Logo */}
+        <Link
+          href="/"
+          className="text-accent text-sm font-bold tracking-tight transition-opacity hover:opacity-80"
+        >
+          <span className="text-muted mr-1 font-normal">$</span>
+          PlotLink
+        </Link>
+
+        {/* Desktop nav links */}
+        <div className="hidden items-center gap-1 md:flex">
+          {NAV_LINKS.map(({ href, label }) => {
+            const active = pathname === href || pathname.startsWith(href + "/");
+            return (
+              <Link
+                key={href}
+                href={href}
+                className={`rounded px-2.5 py-1 text-xs transition-colors ${
+                  active
+                    ? "bg-[var(--accent)]/10 text-accent"
+                    : "text-muted hover:text-foreground"
+                }`}
+              >
+                {active && <span className="text-accent-dim mr-0.5">&gt;</span>}
+                {label}
+              </Link>
+            );
+          })}
+        </div>
+
+        {/* Right side: wallet + mobile toggle */}
+        <div className="flex items-center gap-2">
+          <div className="hidden md:block">
+            <ConnectWallet />
+          </div>
+          <button
+            onClick={() => setMobileOpen(!mobileOpen)}
+            className="text-muted hover:text-foreground p-1 text-sm transition-colors md:hidden"
+            aria-label="Toggle menu"
+          >
+            {mobileOpen ? "[x]" : "[=]"}
+          </button>
+        </div>
+      </div>
+
+      {/* Mobile dropdown */}
+      {mobileOpen && (
+        <div className="border-t border-[var(--border)] bg-[var(--bg)] px-4 pb-3 pt-2 md:hidden">
+          <div className="flex flex-col gap-1">
+            {NAV_LINKS.map(({ href, label }) => {
+              const active = pathname === href || pathname.startsWith(href + "/");
+              return (
+                <Link
+                  key={href}
+                  href={href}
+                  onClick={() => setMobileOpen(false)}
+                  className={`rounded px-2.5 py-1.5 text-xs transition-colors ${
+                    active
+                      ? "bg-[var(--accent)]/10 text-accent"
+                      : "text-muted hover:text-foreground"
+                  }`}
+                >
+                  {active && <span className="text-accent-dim mr-0.5">&gt;</span>}
+                  {label}
+                </Link>
+              );
+            })}
+          </div>
+          <div className="mt-2 border-t border-[var(--border)] pt-2">
+            <ConnectWallet />
+          </div>
+        </div>
+      )}
+    </nav>
+  );
+}