Add src/components/dashboard/Sidebar.jsx

2026-03-11 08:40:56 -05:00 · 2026-03-11 08:40:56 -05:00 · b1d89f1e47
parent 80f44eba59
commit b1d89f1e47
1 changed files with 115 additions and 0 deletions
--- a/src/components/dashboard/Sidebar.jsx
+++ b/src/components/dashboard/Sidebar.jsx
@ -0,0 +1,115 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import { createPageUrl } from "@/utils";
+import {
+  BarChart3,
+  ChevronDown,
+  ChevronRight,
+  Clipboard,
+  GraduationCap,
+  History,
+  Headphones,
+  Users,
+  User,
+  CreditCard,
+  LogOut,
+  Rocket
+} from "lucide-react";
+
+const menuItems = [
+  {
+    label: "Program Management",
+    icon: Rocket,
+    children: [
+      { label: "FER Dashboard", page: "Dashboard", icon: BarChart3 },
+      { label: "Program Onboarding", page: "Dashboard", icon: Clipboard },
+      { label: "Training", page: "Dashboard", icon: GraduationCap },
+      { label: "Issue History", page: "Dashboard", icon: History },
+    ],
+  },
+  {
+    label: "Communication & Support",
+    icon: Headphones,
+    children: [],
+  },
+  {
+    label: "Member Management",
+    icon: Users,
+    children: [
+      { label: "My Profile", page: "MyProfile", icon: User },
+      { label: "Stripe Connect", page: "StripeConnect", icon: CreditCard },
+    ],
+  },
+];
+
+export default function Sidebar({ activePage }) {
+  const [expanded, setExpanded] = useState({ "Program Management": true, "Member Management": true });
+
+  const toggle = (label) => {
+    setExpanded((prev) => ({ ...prev, [label]: !prev[label] }));
+  };
+
+  return (
+    <aside
+      id="sidebar"
+      className="w-[220px] min-h-screen bg-white border-r border-gray-200 flex flex-col fixed left-0 top-0 z-30"
+    >
+      {/* Logo */}
+      <div className="px-4 py-4 border-b border-gray-200">
+        <img
+          src="https://qtrypzzcjebvfcihiynt.supabase.co/storage/v1/object/public/base44-prod/public/69ac537c5138f01ec706f4bc/9c287bb3b_Logo_PBC_horz_color.png"
+          alt="PackageHub Business Centers"
+          className="h-10 w-auto object-contain"
+        />
+      </div>
+
+      {/* Nav */}
+      <nav className="flex-1 py-2 overflow-y-auto">
+        {menuItems.map((group) => (
+          <div key={group.label} className="mb-0.5">
+            <button
+              onClick={() => toggle(group.label)}
+              className="w-full flex items-center gap-2 px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-100 transition-colors"
+            >
+              <group.icon className="w-4 h-4 text-gray-500 flex-shrink-0" />
+              <span className="flex-1 text-left">{group.label}</span>
+              {group.children.length > 0 && (
+                expanded[group.label]
+                  ? <ChevronDown className="w-3.5 h-3.5 text-gray-400" />
+                  : <ChevronRight className="w-3.5 h-3.5 text-gray-400" />
+              )}
+            </button>
+            {expanded[group.label] && group.children.map((item) => {
+              const isActive =
+                (item.page === "Dashboard" && activePage === "Dashboard" && item.label === "FER Dashboard") ||
+                (item.page === "MyProfile" && activePage === "MyProfile") ||
+                (item.page === "StripeConnect" && activePage === "StripeConnect");
+
+              return (
+                <Link
+                  key={item.label}
+                  to={createPageUrl(item.page)}
+                  className={`flex items-center gap-2 pl-10 pr-4 py-2 text-sm transition-colors ${
+                    isActive
+                      ? "bg-gray-200 text-gray-900 font-semibold"
+                      : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+                  }`}
+                >
+                  {item.label}
+                </Link>
+              );
+            })}
+          </div>
+        ))}
+      </nav>
+
+      {/* Logout */}
+      <div className="border-t border-gray-200 p-3">
+        <button className="flex items-center gap-2 px-3 py-2 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 transition-colors w-full rounded-lg border border-gray-200">
+          <LogOut className="w-4 h-4" />
+          Logout
+        </button>
+      </div>
+    </aside>
+  );
+}