115 lines
3.8 KiB
JavaScript
115 lines
3.8 KiB
JavaScript
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>
|
|
);
|
|
} |