135 lines
4.2 KiB
TypeScript
135 lines
4.2 KiB
TypeScript
import Head from "next/head";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/router";
|
|
import { ReactNode } from "react";
|
|
import { useAuth } from "../lib/auth-context";
|
|
|
|
const NAV_ITEMS = [
|
|
{ href: "/", label: "Jobs" },
|
|
{ href: "/settings/devices", label: "Devices" },
|
|
{ href: "/settings/members", label: "Members" },
|
|
{ href: "/settings/api-keys", label: "API keys" },
|
|
{ href: "/settings/mqtt-certs", label: "MQTT certs" },
|
|
];
|
|
|
|
export default function Layout({
|
|
children,
|
|
title,
|
|
}: {
|
|
children: ReactNode;
|
|
title?: string;
|
|
}) {
|
|
const { user, memberships, activeOrg, setActiveOrgId, logout } = useAuth();
|
|
const router = useRouter();
|
|
|
|
const isActive = (href: string) =>
|
|
href === "/"
|
|
? router.pathname === "/" || router.pathname.startsWith("/jobs")
|
|
: router.pathname.startsWith(href);
|
|
|
|
const handleLogout = async () => {
|
|
await logout();
|
|
router.push("/login");
|
|
};
|
|
|
|
const navLinks = NAV_ITEMS.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className="ul-shell__nav-link"
|
|
aria-current={isActive(item.href) ? "page" : undefined}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
));
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{title ? `${title} · UlHub` : "UlHub"}</title>
|
|
</Head>
|
|
<a className="ul-skip-link" href="#main-content">
|
|
Skip to main content
|
|
</a>
|
|
<header className="ul-shell__header">
|
|
<Link href="/" className="ul-shell__brand" aria-label="UlHub jobs home">
|
|
<span className="ul-shell__brand-mark" aria-hidden="true">
|
|
UL
|
|
</span>
|
|
<span>UlHub</span>
|
|
</Link>
|
|
{user && (
|
|
<>
|
|
<nav
|
|
className="ul-shell__nav ul-shell__nav--desktop"
|
|
aria-label="Primary navigation"
|
|
>
|
|
{navLinks}
|
|
</nav>
|
|
<div className="ul-shell__context">
|
|
<div className="ul-org-context">
|
|
<span className="ul-org-context__label" id="active-org-label">
|
|
Active organization
|
|
</span>
|
|
{memberships.length > 1 ? (
|
|
<select
|
|
className="ul-org-context__select"
|
|
aria-labelledby="active-org-label"
|
|
value={activeOrg?.org.id ?? ""}
|
|
onChange={(event) => setActiveOrgId(event.target.value)}
|
|
>
|
|
{memberships.map((membership) => (
|
|
<option key={membership.org.id} value={membership.org.id}>
|
|
{membership.org.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
) : (
|
|
<strong className="ul-org-context__name">
|
|
{activeOrg?.org.name ?? "No organization"}
|
|
</strong>
|
|
)}
|
|
{activeOrg && (
|
|
<span className="ul-org-context__role">
|
|
{activeOrg.role.replace("_", " ")}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<details className="ul-shell__menu">
|
|
<summary>Menu</summary>
|
|
<nav
|
|
className="ul-shell__nav ul-shell__nav--mobile"
|
|
aria-label="Mobile navigation"
|
|
>
|
|
{navLinks}
|
|
<div className="ul-shell__mobile-account">
|
|
<span>{user.email}</span>
|
|
<button
|
|
className="ul-button ul-button--quiet"
|
|
onClick={handleLogout}
|
|
>
|
|
Log out
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
</details>
|
|
<div className="ul-shell__account">
|
|
<span className="ul-shell__email">{user.email}</span>
|
|
<button
|
|
className="ul-button ul-button--quiet"
|
|
onClick={handleLogout}
|
|
>
|
|
Log out
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</header>
|
|
<main id="main-content" className="ul-shell__main" tabIndex={-1}>
|
|
{children}
|
|
</main>
|
|
</>
|
|
);
|
|
}
|