admin / Apex

import { NavLink } from "react-router-dom";
import { useAuth } from "../lib/auth";

export default function Layout({ children }: { children: React.ReactNode }) {
  const { user, logout, has } = useAuth();
  return (
    <div className="shell">
      <aside className="sidebar">
        <div className="brand">
          <img src="/icon.svg" width={28} height={28} alt="" />
          Synapse-Apex
        </div>
        <NavLink to="/" end>Dashboard</NavLink>
        <NavLink to="/capabilities">Capability library</NavLink>
        <NavLink to="/library">Answer Library</NavLink>
        {has("administrator", "finance", "bid_manager") && (
          <NavLink to="/admin">Administration</NavLink>
        )}
        <div style={{ marginTop: 24, fontSize: 12, color: "#b9c0e6" }}>
          {user?.name}
          <br />
          {user?.roles.join(", ")}
        </div>
        <button className="ghost" style={{ marginTop: 16, color: "#fff", borderColor: "rgba(255,255,255,0.3)" }} onClick={logout}>
          Sign out
        </button>
      </aside>
      <main className="main">{children}</main>
    </div>
  );
}