Feat : Gitbook

2026-09-22 20:00:47 +00:00 · 2026-05-11 11:50:24 +07:00
parent 7ad538bcf2
commit fd92af77a0
124 changed files with 34154 additions and 4 deletions
@@ -0,0 +1,122 @@
+"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>
+  );
+}