/* global React, T: globalT, M8Logo, Icon, Avatar, AvatarStack, SectionLabel, useT, ThemeContext, makeTheme */ // ===================================================================== // Four sidebar variations. Each is a self-contained component that // renders a column with explicit width, full-height, white background. // // All four share: // - The dark active treatment (brand-700 fill, white text) // - Sentence-case nav labels (per README microcopy rules) // - Inter weights 400/500/600 // - Theme via React Context — pass dark=true to flip to a slate-night // palette without touching internals. // // They differ in what's promoted to nav: pinned items, workspace // switcher, command palette, or live workflow timeline. // ===================================================================== /* ---------- Shared building blocks for the sidebars ---------- */ function NavRow({ icon, label, count, active, live, indent = 0, sub, trailing, badge, muted }) { const T = window.useT(); // Single nav item. Dark fill + white text when active. const bg = active ? T.brand700 : "transparent"; const fg = active ? "#fff" : muted ? T.text3 : T.text2; const iconFg = active ? "#fff" : T.text3; return (
{icon} {label} {sub && ( {sub} )} {live && ( )} {badge} {count !== undefined && ( {count} )} {trailing}
); } function UserChip({ initials = "C", name = "Completer Mensah", sub = "completer@onwardsanalytics.com.au", status = "online", role, compact }) { const T = window.useT(); const dark = T.dark; return (
{initials} {name} {role && ( {role} )} {!compact && ( {sub} )}
); } function Sidebar({ width, children, dark = false, style }) { const themed = window.makeTheme(dark); return ( ); } /* ===================================================================== V1 — REFINED FLOOR Same shape as today, but every weakness fixed: - Workspace badge under the wordmark (white-label feel) - Compact search with ⌘K hint - Nav has inline counts + live-workshop dot - Pinned items (programme + open assessment) - User chip restructured to not truncate, shows role badge ===================================================================== */ function SidebarV1({ dark = false }) { const T = window.makeTheme(dark); return ( {/* Brand block */}
Method8 Onwards Analytics
{/* Search */}
Search Method8 ⌘ K
{/* Primary nav */}
} label="Dashboard"/> } label="Assessments" count={12}/> } label="Deployed modules" count={3} live active/> } label="Actions" count={18} badge={ 3 due }/>
{/* Pinned */} }>Pinned
} label="Gold Fields" sub="Programme · 12 assessments"/> } label="Safety Standard Gap" sub="80% complete"/> } label="ISO 9001 audit" sub="Draft"/>
{/* User chip */}
); } /* ===================================================================== V2 — PROGRAMME-SCOPED TWO-TIER The big idea: make explicit that "Assessments / Modules / Actions" are always scoped to a programme. So programme switcher comes FIRST, and the nav is grouped under "Programme" beneath it. Cleaner than inheriting context from a breadcrumb. ===================================================================== */ function SidebarV2({ dark = false }) { const T = window.makeTheme(dark); return ( {/* Brand + workspace */}
Method8
{/* Workspace switcher */}
OA Onwards Analytics Workspace
{/* Programme switcher — bigger, with progress */}
Active programme
GF Gold Fields
7 of 12 assessments 62%
{/* Workspace-level nav */} Workspace
} label="Dashboard"/> } label="Inbox" count={4} badge={ }/>
{/* Programme-level nav */} In Gold Fields
} label="Assessments" count={12}/> } label="Deployed modules" count={3} live active/> } label="Actions" count={18}/>
{/* Recently opened */} Recent
{[ { dot: T.violet600, label: "Safety Standard Gap", sub: "2m ago" }, { dot: T.sky500, label: "Tailings Compliance", sub: "Yesterday" }, { dot: T.amber500, label: "ISO 9001 audit", sub: "Mon" }, ].map(r => (
{r.label} {r.sub}
))}
{/* User chip */}
); } /* ===================================================================== V3 — COMMAND-FIRST RAIL The primary affordance is a big command palette at the top — every navigation is one keystroke away. The 4 nav items become small + dense underneath. Below: a live-workshop "carrier card" promoting the active session, and a + Create floating action at the bottom. This is the boldest day-to-day UX bet: keyboard-first, in-progress work surfaced as a first-class object, classic nav demoted. ===================================================================== */ function SidebarV3({ dark = false }) { const T = window.makeTheme(dark); return ( {/* Top: logo + workspace inline */}
Method8 OA
{/* Big command palette */}
Jump to anything… ⌘ K
{/* Tight nav */}
} label="Dashboard"/> } label="Assessments" count={12}/> } label="Deployed modules" count={3} live active/> } label="Actions" count={18}/>
{/* Active workshop "carrier card" */} Live }>Active workshop
{/* Progress ring */} 80%
Safety Standard Gap
You're completer
3 here Join →
{/* User row */}
); } /* ===================================================================== V4 — LIVE TIMELINE NAV The most radical re-frame: instead of nav-as-feature-tree, nav reads like a feed of work. "Now / Today / Browse". The classic 4 items get demoted to a small Browse strip at the bottom. Promotes what's happening over what's possible. ===================================================================== */ function SidebarV4({ dark = false }) { const T = window.makeTheme(dark); return ( {/* Brand */}
Method8
{/* Workspace + programme inline pill */}
OA Onwards / Gold Fields
{/* NOW */} Live }>Now
{/* Live workshop card — primary "active" affordance */}
WORKSHOP 4 people 80%
Safety Standard Gap Assessment
You're completer
{/* TODAY */} May 17}>Today
3 actions due today
Submission deadline · 5pm
2 review requests
{/* BROWSE — demoted classic nav */} Browse
} label="Dashboard" muted/> } label="Assessments" muted count={12}/> } label="Deployed modules" muted count={3}/> } label="Actions" muted count={18}/>
); } Object.assign(window, { NavRow, UserChip, Sidebar, SidebarV1, SidebarV2, SidebarV3, SidebarV4, });