From 9c4caeedbab6793bfd4ee2dc68dad2f06cf76a5e Mon Sep 17 00:00:00 2001
From: Chandler Copeland <ccopeland@motivhealth.com>
Date: Thu, 19 Mar 2026 16:37:03 -0600
Subject: [PATCH] feat(03-02): add portal authenticated layout and PortalNav

- Create portal/(protected)/layout.tsx with auth() check and redirect to /agent/login
- Create PortalNav.tsx as client component with Dashboard/Clients links and active state
- Nav uses usePathname() for active gold underline, LogoutButton for sign-out
- CSS variables --navy/--gold/--cream applied throughout portal shell
---
 .../src/app/portal/(protected)/layout.tsx     | 21 +++++++
 .../src/app/portal/_components/PortalNav.tsx  | 55 +++++++++++++++++++
 2 files changed, 76 insertions(+)
 create mode 100644 teressa-copeland-homes/src/app/portal/(protected)/layout.tsx
 create mode 100644 teressa-copeland-homes/src/app/portal/_components/PortalNav.tsx

diff --git a/teressa-copeland-homes/src/app/portal/(protected)/layout.tsx b/teressa-copeland-homes/src/app/portal/(protected)/layout.tsx
new file mode 100644
index 0000000..16c5f1d
--- /dev/null
+++ b/teressa-copeland-homes/src/app/portal/(protected)/layout.tsx
@@ -0,0 +1,21 @@
+import { auth } from "@/lib/auth";
+import { redirect } from "next/navigation";
+import { PortalNav } from "../_components/PortalNav";
+
+export default async function PortalLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const session = await auth();
+  if (!session) {
+    redirect("/agent/login");
+  }
+
+  return (
+    <div className="min-h-screen bg-[var(--cream)]">
+      <PortalNav userEmail={session.user?.email ?? ""} />
+      <main className="max-w-7xl mx-auto px-6 py-8">{children}</main>
+    </div>
+  );
+}
diff --git a/teressa-copeland-homes/src/app/portal/_components/PortalNav.tsx b/teressa-copeland-homes/src/app/portal/_components/PortalNav.tsx
new file mode 100644
index 0000000..149f523
--- /dev/null
+++ b/teressa-copeland-homes/src/app/portal/_components/PortalNav.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { LogoutButton } from "@/components/ui/LogoutButton";
+
+interface PortalNavProps {
+  userEmail: string;
+}
+
+const navLinks = [
+  { href: "/portal/dashboard", label: "Dashboard" },
+  { href: "/portal/clients", label: "Clients" },
+];
+
+export function PortalNav({ userEmail }: PortalNavProps) {
+  const pathname = usePathname();
+
+  return (
+    <nav className="bg-[var(--navy)] text-white">
+      <div className="flex items-center justify-between px-6 py-3">
+        {/* Left: site name + nav links */}
+        <div className="flex items-center gap-8">
+          <span className="text-base font-semibold tracking-wide">
+            Teressa Copeland
+          </span>
+          <div className="flex items-center gap-6">
+            {navLinks.map(({ href, label }) => {
+              const isActive = pathname.startsWith(href);
+              return (
+                <Link
+                  key={href}
+                  href={href}
+                  className={`text-sm hover:opacity-80 transition-opacity pb-0.5 ${
+                    isActive
+                      ? "border-b-2 border-[var(--gold)] font-medium"
+                      : "border-b-2 border-transparent"
+                  }`}
+                >
+                  {label}
+                </Link>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Right: agent email + logout */}
+        <div className="flex items-center gap-4">
+          <span className="text-xs text-white/60">{userEmail}</span>
+          <LogoutButton />
+        </div>
+      </div>
+    </nav>
+  );
+}