| import { IconAsk, IconEval, IconLogout, IconOverview, IconSeal } from "../lib/icons"; |
| import Logo from "./Logo"; |
|
|
| const NAV = [ |
| { id: "overview", label: "Overview", Icon: IconOverview }, |
| { id: "ask", label: "Ask", Icon: IconAsk }, |
| { id: "audit", label: "Audit", Icon: IconSeal }, |
| { id: "evaluation", label: "Evaluation", Icon: IconEval }, |
| ]; |
|
|
| export default function Sidebar({ view, setView, online, llmAvailable, userEmail, onLogout }) { |
| const status = online |
| ? `API online · ${llmAvailable ? "Thinking ready" : "Fast mode"}` |
| : "API offline"; |
| return ( |
| <aside className="sidebar"> |
| <button |
| type="button" |
| className="brand" |
| onClick={() => setView("overview")} |
| aria-label="Back to overview" |
| > |
| <Logo size={26} /> |
| <span className="brand-name brand-sub-hide">Tamga</span> |
| </button> |
| |
| <nav className="nav" aria-label="Primary"> |
| {NAV.map(({ id, label, Icon }) => ( |
| <button |
| key={id} |
| className={`nav-item ${view === id ? "active" : ""}`} |
| onClick={() => setView(id)} |
| aria-label={label} |
| aria-current={view === id ? "page" : undefined} |
| > |
| <Icon /> |
| <span className="label">{label}</span> |
| </button> |
| ))} |
| </nav> |
| |
| {userEmail && ( |
| <div className="sidebar-account brand-sub-hide"> |
| <span className="acct-email" title={userEmail}>{userEmail}</span> |
| <button className="acct-logout" onClick={onLogout} aria-label="Log out" title="Log out"> |
| <IconLogout size={15} /> |
| </button> |
| </div> |
| )} |
| |
| <div className="sidebar-foot"> |
| <span |
| className={`status-dot ${online ? "" : "off"}`} |
| role="img" |
| aria-label={online ? "API online" : "API offline"} |
| /> |
| <span className="brand-sub-hide">{status}</span> |
| </div> |
| </aside> |
| ); |
| } |
|
|
