87 lines
2.9 KiB
TypeScript
87 lines
2.9 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import Link from "next/link"
|
|
import { usePathname } from "next/navigation"
|
|
import { authClient } from "@/lib/auth-client"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
const navItems = [
|
|
{ href: "/parent/dashboard", label: "Dashboard", emoji: "📊" },
|
|
{ href: "/parent/configuracion", label: "Configuración", emoji: "⚙️" },
|
|
]
|
|
|
|
export default function ParentLayout({ children }: { children: React.ReactNode }) {
|
|
const pathname = usePathname()
|
|
const { data: session } = authClient.useSession()
|
|
const [sidebarOpen, setSidebarOpen] = useState(false)
|
|
|
|
if (
|
|
pathname.startsWith("/parent/auth")
|
|
) {
|
|
return <div className="min-h-dvh bg-background">{children}</div>
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-dvh bg-background flex flex-col">
|
|
<header className="sticky top-0 z-10 bg-background/95 backdrop-blur border-b border-border px-4 py-3 flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
onClick={() => setSidebarOpen(!sidebarOpen)}
|
|
className="text-foreground touch-target rounded-xl flex items-center justify-center"
|
|
>
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<path d="M3 12h18M3 6h18M3 18h18" />
|
|
</svg>
|
|
</button>
|
|
<h1 className="text-lg font-display font-bold">EduEasy</h1>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-sm text-muted-foreground hidden sm:block">
|
|
{session?.user?.name || "Mamá"}
|
|
</span>
|
|
<button
|
|
onClick={() => authClient.signOut()}
|
|
className="text-sm text-muted-foreground underline"
|
|
>
|
|
Salir
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
{sidebarOpen && (
|
|
<div
|
|
className="fixed inset-0 bg-black/20 z-20"
|
|
onClick={() => setSidebarOpen(false)}
|
|
>
|
|
<nav
|
|
className="fixed left-0 top-0 bottom-0 w-64 bg-white shadow-lg p-4 pt-16"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="flex flex-col gap-2">
|
|
{navItems.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
onClick={() => setSidebarOpen(false)}
|
|
className={cn(
|
|
"flex items-center gap-3 rounded-xl px-4 py-3 font-display font-medium transition-colors",
|
|
pathname.startsWith(item.href)
|
|
? "bg-primary/10 text-primary"
|
|
: "text-foreground hover:bg-muted",
|
|
)}
|
|
>
|
|
<span>{item.emoji}</span>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
)}
|
|
|
|
<main className="flex-1">{children}</main>
|
|
</div>
|
|
)
|
|
}
|