first wokring prototype

src/layout/SectionSidebar.tsx

@@ -0,0 +1,49 @@
+import type { CampaignWorkspaceSection } from "../types";
+
+const campaignItems: { id: CampaignWorkspaceSection; label: string }[] = [
+  { id: "campaign", label: "General" },
+  { id: "fields", label: "Fields" },
+  { id: "recipients", label: "Recipients" },
+  { id: "template", label: "Template" },
+  { id: "files", label: "Attachments" }
+];
+
+const sendItems: { id: CampaignWorkspaceSection; label: string }[] = [
+  { id: "mail-settings", label: "Server settings" },
+  { id: "global-settings", label: "Global settings" },
+  { id: "review", label: "Review" },
+  { id: "send", label: "Send" },
+  { id: "report", label: "Report" },
+  { id: "audit", label: "Audit log" }
+];
+
+export default function SectionSidebar({
+  active,
+  onSelect
+}: {
+  active: CampaignWorkspaceSection;
+  onSelect: (section: CampaignWorkspaceSection) => void;
+}) {
+  return (
+    <aside className="section-sidebar">
+      <button className={`section-link section-link-primary ${active === "overview" ? "active" : ""}`} onClick={() => onSelect("overview")}>Overview</button>
+
+      <div className="section-title section-title-lower">CAMPAIGN</div>
+      {campaignItems.map((item) => (
+        <button key={item.id} className={`section-link ${active === item.id ? "active" : ""}`} onClick={() => onSelect(item.id)}>
+          {item.label}
+        </button>
+      ))}
+
+      <div className="section-title section-title-lower">SEND CAMPAIGN</div>
+      {sendItems.map((item) => (
+        <button key={item.id} className={`section-link ${active === item.id ? "active" : ""}`} onClick={() => onSelect(item.id)}>
+          {item.label}
+        </button>
+      ))}
+
+      <div className="section-title section-title-lower">ADVANCED</div>
+      <button className={`section-link subtle ${active === "json" ? "active" : ""}`} onClick={() => onSelect("json")}>JSON</button>
+    </aside>
+  );
+}