// Left navigation panel.

const NAV_ITEMS = [
  { id: "about",      label: "Connor Tan",  icon: I.user },
  { id: "experience", label: "Experience",  icon: I.gem  },
  { id: "projects",   label: "Projects",    icon: I.code },
  { id: "resume",     label: "Resume",      icon: I.scroll },
  { id: "contact",    label: "Contact",     icon: I.mail },
];

const LeftNav = ({ active, onChange }) => (
  <div className="leftnav">
    <div className="navlist">
      {NAV_ITEMS.map(({ id, label, icon: Icn }) => (
        <div
          key={id}
          className={`navitem ${active === id ? "active" : ""}`}
          onClick={() => onChange(id)}
        >
          <Icn className="nico" />
          <span>{label}</span>
        </div>
      ))}
    </div>
    <div className="footer">
      <div className="pn disabled" aria-disabled="true">Patch Notes</div>
      <div className="ver">v 26.04</div>
    </div>
  </div>
);

window.LeftNav = LeftNav;
window.NAV_ITEMS = NAV_ITEMS;