85 lines
2.7 KiB
JavaScript
85 lines
2.7 KiB
JavaScript
|
"use client";
|
||
|
|
import { useState } from "react";
|
||
|
|
import Link from "next/link";
|
||
|
|
import Image from "next/image";
|
||
|
|
import { usePathname } from "next/navigation";
|
||
|
|
|
||
|
|
export default function AppShell({ pages, session, onSignIn, onSignOut, children }) {
|
||
|
|
const [open, setOpen] = useState(false);
|
||
|
|
const pathname = usePathname();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="app">
|
||
|
|
<aside className={`side${open ? " open" : ""}`}>
|
||
|
|
<div className="side-logo">
|
||
|
|
<Image src="/assets/img/logo-alfa-blanco.png" alt="ALFA+" width={100} height={27} />
|
||
|
|
<div className="sub">Analítica Comercial</div>
|
||
|
|
</div>
|
||
|
|
<nav className="nav">
|
||
|
|
{pages.map((p) =>
|
||
|
|
p.built ? (
|
||
|
|
<Link
|
||
|
|
key={p.href}
|
||
|
|
href={p.href}
|
||
|
|
className={`nav-item${pathname === p.href ? " active" : ""}`}
|
||
|
|
style={{ textDecoration: "none" }}
|
||
|
|
onClick={() => setOpen(false)}
|
||
|
|
>
|
||
|
|
<span className="ico">{p.ico}</span>
|
||
|
|
{p.label}
|
||
|
|
</Link>
|
||
|
|
) : (
|
||
|
|
<div key={p.href} className="nav-item soon" title="Próximamente">
|
||
|
|
<span className="ico">{p.ico}</span>
|
||
|
|
{p.label}
|
||
|
|
<span className="tag">Pronto</span>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
)}
|
||
|
|
</nav>
|
||
|
|
<div className="side-foot">
|
||
|
|
Datos: Dynamics 365
|
||
|
|
<br />
|
||
|
|
En vivo
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
<div className={`backdrop${open ? " open" : ""}`} onClick={() => setOpen(false)} />
|
||
|
|
|
||
|
|
<div className="main">
|
||
|
|
<div className="topbar">
|
||
|
|
<button className="hamburger" aria-label="Menú" onClick={() => setOpen((o) => !o)} type="button">
|
||
|
|
☰
|
||
|
|
</button>
|
||
|
|
<div className="ctrl" style={{ marginLeft: "auto" }}>
|
||
|
|
{session?.email ? (
|
||
|
|
<>
|
||
|
|
{session.isAdmin && (
|
||
|
|
<Link href="/admin/metas" style={{ marginRight: 12, fontSize: 13, color: "var(--marca)" }}>
|
||
|
|
⚙ Metas
|
||
|
|
</Link>
|
||
|
|
)}
|
||
|
|
<span style={{ marginRight: 12 }}>
|
||
|
|
{session.email} {session.isAdmin ? "(admin)" : ""}
|
||
|
|
</span>
|
||
|
|
<form action={onSignOut}>
|
||
|
|
<button type="submit" className="login-btn">
|
||
|
|
Cerrar sesión
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
</>
|
||
|
|
) : (
|
||
|
|
<form action={onSignIn}>
|
||
|
|
<button type="submit" className="login-btn">
|
||
|
|
Iniciar sesión
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<main className="content">{children}</main>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|