function Nav({ active }) {
  const isDark = active === 'motion';
  return (
    <nav className={"nav" + (isDark ? " dark" : "")}>
      <div className="container">
        <a href="./index.html" className="brand">
          <img src={isDark ? "./assets/mark-dark.svg" : "./assets/mark-light.svg"} alt="" />
          <div className="wm">TETRAHEDRON SYSTEMS</div>
        </a>
        <div className="links">
          <a href="./index.html"   className={"link" + (active === 'home' ? ' active' : '')}>Home</a>
          <a href="./motion.html" className={"link" + (active === 'motion' ? ' active' : '')}>Motion</a>
          <a href="./legal.html"  className={"link" + (active === 'legal' ? ' active' : '')}>Legal</a>
          <a href="https://docs.tigerbeetle.com/" target="_blank" rel="noopener" className="link">Docs <span className="ext">↗</span></a>
        </div>
      </div>
    </nav>
  );
}

window.Nav = Nav;