| import { NavLink } from "react-router-dom"; |
| import { Globe2, Activity, Scale } from "lucide-react"; |
| import "./Sidebar.css"; |
| import LogoMark from "./LogoMark.jsx"; |
|
|
| export const NAV_ITEMS = [ |
| { to: "/map", label: "World Map", short: "Map", Icon: Globe2, ord: "01" }, |
| { to: "/timeline", label: "Timeline", short: "Timeline", Icon: Activity, ord: "02" }, |
| { to: "/groups", label: "Contrasting Groups", short: "Spectrum", Icon: Scale, ord: "03" }, |
| ]; |
|
|
| export default function Sidebar({ onNavigate }) { |
| return ( |
| <nav className="sidebar" aria-label="Primary"> |
| <div className="sidebar__brand"> |
| <div className="sidebar__mark"> |
| <LogoMark className="sidebar__logo" /> |
| </div> |
| <div className="sidebar__wordmark"> |
| <div className="sidebar__name">FrameVis</div> |
| <div className="sidebar__tag">media framing intelligence</div> |
| </div> |
| </div> |
| |
| <div className="sidebar__section-label">Views</div> |
| <ul className="sidebar__nav"> |
| {NAV_ITEMS.map(({ to, label, Icon, ord }) => ( |
| <li key={to}> |
| <NavLink to={to} className="sidebar__link" onClick={onNavigate}> |
| {({ isActive }) => ( |
| <> |
| <span className="sidebar__ord">{ord}</span> |
| <Icon size={16} strokeWidth={1.5} /> |
| <span className="sidebar__label">{label}</span> |
| {isActive && <span className="sidebar__active-bar" />} |
| </> |
| )} |
| </NavLink> |
| </li> |
| ))} |
| </ul> |
|
|
| <div className="sidebar__footer"> |
| <div className="label">Status</div> |
| <div className="sidebar__status"> |
| <span className="sidebar__dot" /> |
| API |
| </div> |
| <div className="sidebar__build">build 0.1.0 · prototype</div> |
| </div> |
| </nav> |
| ); |
| } |
|
|
