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