Update gitbook

gitbook/components/DocsHeader.js

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import Link from "next/link";
-import { DOCS_CONFIG } from "@/constants/docsConfig";
+import { DOCS_CONFIG, t } from "@/constants/docsConfig";
 import { DEFAULT_LANG } from "@/constants/languages";
 import { ExternalLink, Menu, X } from "lucide-react";
 import DocsSidebar from "./DocsSidebar";
@@ -41,7 +41,7 @@ export default function DocsHeader({ lang = DEFAULT_LANG }) {
               rel="noopener noreferrer"
               className="flex items-center gap-2 px-3 sm:px-4 py-2 bg-[#E68A6E] text-white rounded-lg font-medium hover:bg-[#d67a5e] transition-colors text-sm"
             >
-              <span className="hidden sm:inline">Go to App</span>
+              <span className="hidden sm:inline">{t(lang, "goToApp")}</span>
               <ExternalLink className="w-4 h-4" />
             </Link>
           </div>

gitbook/components/DocsLayout.js

@@ -17,7 +17,7 @@ export default function DocsLayout({ children, headings = [], lang = DEFAULT_LAN
         
         <div className="flex-1 flex">
           {children}
-          <DocsToc headings={headings} />
+          <DocsToc headings={headings} lang={lang} />
         </div>
       </div>
     </div>

gitbook/components/DocsSidebar.js

@@ -1,49 +1,58 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { DOCS_CONFIG } from "@/constants/docsConfig";
+import { getNavigation } 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";
+import { ChevronDown, ChevronRight, BookOpen, Rocket, Terminal, Monitor, HelpCircle, MessageCircle, Layers, Plug, Cloud, Zap, Wallet, Gift, GitBranch, BarChart3, Code2, Sparkles, Server } from "lucide-react";
 
+// Icons keyed by structural key (language-independent)
 const SECTION_ICONS = {
-  "Getting Started": Rocket,
-  "Providers": Layers,
-  "Features": Zap,
-  "Integration": Plug,
-  "Deployment": Cloud,
-  "Help": HelpCircle
+  gettingStarted: 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
+  introduction: BookOpen,
+  quickStart: Rocket,
+  installation: Terminal,
+  subscription: Sparkles,
+  cheap: Wallet,
+  free: Gift,
+  smartRouting: GitBranch,
+  combos: Layers,
+  quotaTracking: BarChart3,
+  claudeCode: Code2,
+  codex: Code2,
+  cursor: Code2,
+  cline: Code2,
+  roo: Code2,
+  continue: Code2,
+  otherTools: Plug,
+  localhost: Monitor,
+  cloud: 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 navigation = getNavigation(lang);
+  const [openSections, setOpenSections] = useState(() => {
+    if (typeof window === "undefined") return [];
+    try {
+      return JSON.parse(sessionStorage.getItem("sidebarOpen") || "[]");
+    } catch { return []; }
+  });
+
+  useEffect(() => {
+    sessionStorage.setItem("sidebarOpen", JSON.stringify(openSections));
+  }, [openSections]);
 
   const toggleSection = (index) => {
     setOpenSections(prev =>
@@ -53,26 +62,21 @@ export default function DocsSidebar({ isMobile = false, onClose, lang = DEFAULT_
     );
   };
 
-  // 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();
-    }
+    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;
-          
+        {navigation.map((section, sectionIndex) => {
+          const SectionIcon = SECTION_ICONS[section.key] || BookOpen;
+
           return (
-            <div key={sectionIndex}>
-              {/* Section title */}
+            <div key={section.key}>
               <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"
@@ -88,14 +92,13 @@ export default function DocsSidebar({ isMobile = false, onClose, lang = DEFAULT_
                 )}
               </button>
 
-              {/* Section items */}
               {openSections.includes(sectionIndex) && (
                 <ul className="space-y-1">
-                  {section.items.map((item, itemIndex) => {
-                    const ItemIcon = ITEM_ICONS[item.title] || BookOpen;
-                    
+                  {section.items.map((item) => {
+                    const ItemIcon = ITEM_ICONS[item.key] || BookOpen;
+
                     return (
-                      <li key={itemIndex}>
+                      <li key={item.key}>
                         <Link
                           href={buildHref(item.slug)}
                           onClick={handleLinkClick}

gitbook/components/DocsToc.js

@@ -2,8 +2,10 @@
 
 import { useEffect, useState } from "react";
 import { List } from "lucide-react";
+import { t } from "@/constants/docsConfig";
+import { DEFAULT_LANG } from "@/constants/languages";
 
-export default function DocsToc({ headings }) {
+export default function DocsToc({ headings, lang = DEFAULT_LANG }) {
   const [activeId, setActiveId] = useState("");
 
   useEffect(() => {
@@ -33,7 +35,7 @@ export default function DocsToc({ headings }) {
       <nav className="p-4">
         <h3 className="flex items-center gap-2 text-sm font-semibold text-gray-900 mb-3">
           <List className="w-4 h-4" />
-          On this page
+          {t(lang, "onThisPage")}
         </h3>
         <ul className="space-y-2">
           {headings.map((heading, idx) => (

gitbook/components/LanguageSwitcher.js

@@ -5,6 +5,7 @@ import { createPortal } from "react-dom";
 import { useRouter, usePathname } from "next/navigation";
 import { Globe, X } from "lucide-react";
 import { LANGUAGES, getLanguage, DEFAULT_LANG } from "@/constants/languages";
+import { t } from "@/constants/docsConfig";
 
 function extractLangFromPath(pathname) {
   const match = pathname.match(/^\/([^/]+)(?:\/(.*))?$/);
@@ -45,7 +46,7 @@ export default function LanguageSwitcher({ currentLang }) {
         onClick={(e) => e.stopPropagation()}
       >
         <div className="flex items-center justify-between p-4 border-b border-gray-200">
-          <h2 className="font-bold text-lg text-gray-900">Select Language</h2>
+          <h2 className="font-bold text-lg text-gray-900">{t(currentLang, "selectLanguage")}</h2>
           <button
             onClick={() => setOpen(false)}
             className="p-1.5 rounded-lg hover:bg-gray-100 transition-colors"