feat(sprint-3): refresh responsive UlHub portal
This commit is contained in:
Brent Perteet
@@ -1,66 +1,134 @@
|
||||
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';
|
||||
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";
|
||||
|
||||
export default function Layout({ children, title }: { children: ReactNode; title?: string }) {
|
||||
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>
|
||||
<title>{title ? `${title} · UlHub` : "UlHub"}</title>
|
||||
</Head>
|
||||
<header
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '1.5rem',
|
||||
padding: '0.75rem 1.5rem',
|
||||
borderBottom: '1px solid #ddd',
|
||||
fontFamily: 'sans-serif',
|
||||
}}
|
||||
>
|
||||
<Link href="/" style={{ fontWeight: 700, fontSize: '1.1rem', textDecoration: 'none', color: '#111' }}>
|
||||
UlHub
|
||||
<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 style={{ display: 'flex', gap: '1rem' }}>
|
||||
<Link href="/">Jobs</Link>
|
||||
<Link href="/settings/devices">Devices</Link>
|
||||
<Link href="/settings/members">Members</Link>
|
||||
<Link href="/settings/api-keys">API Keys</Link>
|
||||
<Link href="/settings/mqtt-certs">MQTT Certs</Link>
|
||||
<nav
|
||||
className="ul-shell__nav ul-shell__nav--desktop"
|
||||
aria-label="Primary navigation"
|
||||
>
|
||||
{navLinks}
|
||||
</nav>
|
||||
<div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
|
||||
{memberships.length > 1 ? (
|
||||
<select value={activeOrg?.org.id ?? ''} onChange={(e) => setActiveOrgId(e.target.value)}>
|
||||
{memberships.map((m) => (
|
||||
<option key={m.org.id} value={m.org.id}>
|
||||
{m.org.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
) : (
|
||||
<span style={{ color: '#555' }}>{activeOrg?.org.name}</span>
|
||||
)}
|
||||
<span style={{ color: '#888', fontSize: '0.9rem' }}>{user.email}</span>
|
||||
<button
|
||||
onClick={async () => {
|
||||
await logout();
|
||||
router.push('/login');
|
||||
}}
|
||||
>
|
||||
Log out
|
||||
</button>
|
||||
<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 style={{ fontFamily: 'sans-serif', padding: '1.5rem', maxWidth: 1100, margin: '0 auto' }}>{children}</main>
|
||||
<main id="main-content" className="ul-shell__main" tabIndex={-1}>
|
||||
{children}
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user