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:
21
teressa-copeland-homes/src/app/portal/(protected)/layout.tsx
Normal file
21
teressa-copeland-homes/src/app/portal/(protected)/layout.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user