app/components/Sidebar.tsx

import Link from "next/link";

export default function Sidebar() {
  const links = [
    { name: "Home", path: "/" },
    { name: "TIA Portal", path: "/tia" },
    { name: "Agents", path: "/agents" },
    { name: "Mapping", path: "/mapping" },
    { name: "Lineage", path: "/mapping/lineage" },
  ];

  return (
    <div style={{
      width: "220px",
      background: "#111",
      height: "100vh",
      padding: "20px",
      boxSizing: "border-box",
      position: "fixed",
      left: 0,
      top: 0
    }}>
      <h3 style={{ color: "#fff" }}>CITADEL</h3>
      <ul style={{ listStyle: "none", padding: 0 }}>
        {links.map((l) => (
          <li key={l.path} style={{ margin: "12px 0" }}>
            <Link href={l.path} style={{ color: "#ccc", textDecoration: "none" }}>
              {l.name}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}