File size: 1,911 Bytes
4083225 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | 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>
);
}
|