122 lines
4.1 KiB
JavaScript
122 lines
4.1 KiB
JavaScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { DOCS_CONFIG } from "@/constants/docsConfig";
|
|
import { DEFAULT_LANG } from "@/constants/languages";
|
|
import { ChevronDown, ChevronRight, BookOpen, Rocket, Terminal, Monitor, FolderOpen, HelpCircle, MessageCircle, Layers, Plug, Cloud, Zap, Wallet, Gift, GitBranch, BarChart3, Code2, Sparkles, Server, Globe } from "lucide-react";
|
|
|
|
const SECTION_ICONS = {
|
|
"Getting Started": Rocket,
|
|
"Providers": Layers,
|
|
"Features": Zap,
|
|
"Integration": Plug,
|
|
"Deployment": Cloud,
|
|
"Help": HelpCircle
|
|
};
|
|
|
|
const ITEM_ICONS = {
|
|
"Introduction": BookOpen,
|
|
"Quick Start": Rocket,
|
|
"Installation": Terminal,
|
|
"Subscription (Maximize)": Sparkles,
|
|
"Cheap (Backup)": Wallet,
|
|
"Free (Fallback)": Gift,
|
|
"Smart Routing": GitBranch,
|
|
"Combos & Fallback": Layers,
|
|
"Quota Tracking": BarChart3,
|
|
"Claude Code": Code2,
|
|
"OpenAI Codex": Code2,
|
|
"Cursor": Code2,
|
|
"Cline": Code2,
|
|
"Roo": Code2,
|
|
"Continue": Code2,
|
|
"Other Tools": Plug,
|
|
"Localhost": Monitor,
|
|
"Cloud (VPS/Docker)": Server,
|
|
"Troubleshooting": HelpCircle,
|
|
"FAQ": MessageCircle
|
|
};
|
|
|
|
export default function DocsSidebar({ isMobile = false, onClose, lang = DEFAULT_LANG }) {
|
|
const pathname = usePathname();
|
|
const [openSections, setOpenSections] = useState(
|
|
DOCS_CONFIG.navigation.map((_, i) => i)
|
|
);
|
|
|
|
const toggleSection = (index) => {
|
|
setOpenSections(prev =>
|
|
prev.includes(index)
|
|
? prev.filter(i => i !== index)
|
|
: [...prev, index]
|
|
);
|
|
};
|
|
|
|
// Build URL for a navigation slug under current language
|
|
const buildHref = (slug) => (slug ? `/${lang}/${slug}` : `/${lang}`);
|
|
|
|
const isActive = (slug) => pathname === buildHref(slug);
|
|
|
|
const handleLinkClick = () => {
|
|
if (isMobile && onClose) {
|
|
onClose();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<aside className={`${isMobile ? 'w-full' : 'w-64'} border-r bg-white border-gray-200 ${isMobile ? 'h-full' : 'h-[calc(100vh-4rem)] sticky top-16'} overflow-y-auto`}>
|
|
<nav className="p-4 space-y-6">
|
|
{DOCS_CONFIG.navigation.map((section, sectionIndex) => {
|
|
const SectionIcon = SECTION_ICONS[section.title] || BookOpen;
|
|
|
|
return (
|
|
<div key={sectionIndex}>
|
|
{/* Section title */}
|
|
<button
|
|
onClick={() => toggleSection(sectionIndex)}
|
|
className="flex items-center justify-between w-full text-sm font-semibold text-gray-900 mb-2 hover:text-[#E68A6E] transition-colors"
|
|
>
|
|
<span className="flex items-center gap-2">
|
|
<SectionIcon className="w-4 h-4" />
|
|
{section.title}
|
|
</span>
|
|
{openSections.includes(sectionIndex) ? (
|
|
<ChevronDown className="w-4 h-4" />
|
|
) : (
|
|
<ChevronRight className="w-4 h-4" />
|
|
)}
|
|
</button>
|
|
|
|
{/* Section items */}
|
|
{openSections.includes(sectionIndex) && (
|
|
<ul className="space-y-1">
|
|
{section.items.map((item, itemIndex) => {
|
|
const ItemIcon = ITEM_ICONS[item.title] || BookOpen;
|
|
|
|
return (
|
|
<li key={itemIndex}>
|
|
<Link
|
|
href={buildHref(item.slug)}
|
|
onClick={handleLinkClick}
|
|
className={`flex items-center gap-2 px-3 py-2 text-sm rounded-lg transition-colors ${
|
|
isActive(item.slug)
|
|
? "bg-[#E68A6E]/10 text-[#E68A6E] font-medium"
|
|
: "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
|
|
}`}
|
|
>
|
|
<ItemIcon className="w-4 h-4" />
|
|
{item.title}
|
|
</Link>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</nav>
|
|
</aside>
|
|
);
|
|
}
|