function DemoBar({ open, setOpen, setScreen, setRoute }) {
  function go(s, r) { setScreen(s); if (r) setRoute(r); setOpen(false); }
  return (
    <div className={"demo-bar " + (open ? "open" : "")}>
      <button className="demo-tog" onClick={() => setOpen(o => !o)} title="Demo nav"><i className="ph ph-flask"></i></button>
      {open && (
        <div className="demo-links">
          <div className="eyebrow">Demo nav</div>
          <button onClick={() => go("login")}>Login</button>
          <button onClick={() => go("app", "dashboard")}>Dashboard</button>
          <button onClick={() => go("app", "reserves")}>Reserves</button>
          <button onClick={() => go("app", "carta")}>Carta</button>
          <button onClick={() => go("app", "experiences")}>Experiences</button>
          <button onClick={() => go("app", "settings")}>Settings</button>
          <button onClick={() => go("expired")}>Expired</button>
        </div>
      )}
    </div>
  );
}

window.DemoBar = DemoBar;