/* global React, Icon, signOut, useDemoMode, setDemoMode */ // The chrome both portals wear: cream contour sidebar, grouped nav, header // band, and the sitewide card spotlight. // // This used to live inline inside ManagerPortal, which is exactly why the // admin dashboard drifted into a different product — there was nothing to // share, so the admin side kept its original flat sidebar while the partner // side grew a design system. Everything structural now lives here once; // what differs between the two is passed in. // // Slots, rather than props for every possible variation: `aside` takes // whatever belongs under the wordmark (the manager's course switcher, the // admin's network status), `headerRight` takes per-screen actions, and // `children` is the screen itself. // ─── NavItem — quiet by default; active state reads as a left accent bar // + faint tint rather than a fully-filled pill, so seven items don't turn // into seven blocks of color. ────────────────────────────────────────── function NavItem({ section, active, onClick }) { const [hover, setHover] = React.useState(false); return ( ); } // ─── Demo Mode toggle (sidebar) ─────────────────────────────────────── // The store behind this is global, not per-portal, so flipping it in the // admin sidebar also puts the partner portal into demo — which is the // behaviour you want when demoing the product end to end. function DemoToggle() { const on = useDemoMode(); return ( ); } // ─── Signed-in footer ───────────────────────────────────────────────── function PortalUser({ name }) { const initials = (name || '').split(' ').filter(Boolean).slice(0, 2) .map(s => s[0].toUpperCase()).join('') || '·'; return (
{initials}
{name}
); } // ─── The spotlight ──────────────────────────────────────────────────── // One listener for every .card in the portal rather than a mousemove // handler per card. Writes the cursor position relative to the hovered card // as custom properties that the ::after rule in styles.css reads. function useCardSpotlight() { React.useEffect(() => { const onMove = (e) => { const card = e.target.closest && e.target.closest('.card'); if (!card) return; const r = card.getBoundingClientRect(); card.style.setProperty('--spot-x', `${e.clientX - r.left}px`); card.style.setProperty('--spot-y', `${e.clientY - r.top}px`); }; document.addEventListener('mousemove', onMove); return () => document.removeEventListener('mousemove', onMove); }, []); } // ─── PortalShell ────────────────────────────────────────────────────── // scope — 'manager-portal' | 'admin-portal'; picks the token overrides // role — the small label under the wordmark // groups — nav group names, in order // sections — [{ id, group, label, icon, hint }] // view/onView — the selected section, controlled by the caller // aside — slot under the wordmark (course switcher, network status) // eyebrow — small text left of the page title // headerRight — slot for per-screen actions // demo — show the Demo Mode toggle function PortalShell({ scope = 'manager-portal', role, groups, sections, view, onView, aside, eyebrow, headerRight, demo = true, name, title, children, }) { useCardSpotlight(); const active = sections.find(s => s.id === view) || sections[0]; return (
{/* Sidebar — a faint contour texture instead of a flat fill so it reads as "course map" rather than "app chrome". */}
Sandbox
{role}
{aside}
{groups.map(g => { const items = sections.filter(s => s.group === g); if (!items.length) return null; return (
{g}
{items.map(s => ( onView(s.id)}/> ))}
); })}
{demo && }
{/* Main */}
{/* A drill-down names itself here rather than leaving the header describing the list you came from. */}
{eyebrow ? `${eyebrow} · ` : ''}{(title ? title.hint : active.hint)}
{title ? title.label : active.label}
{headerRight}
{children}
); } Object.assign(window, { PortalShell, NavItem, DemoToggle, PortalUser, useCardSpotlight });