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
This commit is contained in:
Chandler Copeland
2026-03-19 16:37:03 -06:00
parent 00f9c7c9f0
commit 9c4caeedba
2 changed files with 76 additions and 0 deletions

View File

@@ -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>
);
}

View File

@@ -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>
);
}