调整帮助中心移动端文档布局

src/app/(home)/docs/sidebar.tsx

@@ -3,10 +3,7 @@ import {useState, useMemo, useCallback} from 'react'
 import Link from 'next/link'
 import {usePathname} from 'next/navigation'
 import {ChevronRight} from 'lucide-react'
-
-type Props = {
-  collapsed?: boolean
-}
+import {merge} from '@/lib/utils'
 
 // 菜单配置
 const MENU_ITEMS = [
@@ -58,7 +55,12 @@ const MENU_ITEMS = [
   },
 ]
 
-export default function Sidebar({collapsed = false}: Props) {
+type Props = {
+  className?: string
+  onClose?: () => void
+}
+
+export default function Sidebar({className, onClose}: Props) {
   const pathname = usePathname()
 
   // 获取当前文档 key
@@ -100,9 +102,7 @@ export default function Sidebar({collapsed = false}: Props) {
 
   return (
     <aside
-      className={`bg-white rounded-lg p-3 transition-all duration-200 shrink-0 ${
-        collapsed ? 'w-20' : 'w-68'
-      }`}
+      className={merge(`bg-white rounded-lg p-3 transition-all duration-200 shrink-0`, className)}
     >
       <nav className="space-y-2">
         {MENU_ITEMS.map(section => (
@@ -110,9 +110,7 @@ export default function Sidebar({collapsed = false}: Props) {
             <div
               onClick={() => toggleGroup(section.group)}
               className={`flex items-center gap-2 cursor-pointer px-3 py-2 rounded-sm transition-colors ${
-                finalExpandedGroups[section.group] && !collapsed
-                  ? 'bg-blue-50'
-                  : 'hover:bg-slate-50'
+                finalExpandedGroups[section.group] && 'bg-blue-50'
               }`}
             >
               <div
@@ -123,15 +121,13 @@ export default function Sidebar({collapsed = false}: Props) {
                 <ChevronRight size={16}/>
               </div>
 
-              {!collapsed && (
-                <div className="text-lg font-semibold text-slate-900">
-                  {section.group}
-                </div>
-              )}
+              <div className="text-lg font-semibold text-slate-900">
+                {section.group}
+              </div>
             </div>
 
             {finalExpandedGroups[section.group] && (
-              <ul className={`mt-1 text-base ${collapsed ? 'hidden' : 'block'}`}>
+              <ul className="mt-1 text-base">
                 {section.items.map((item) => {
                   const isActive = currentKey === item.key
                   const href = getItemHref(item.key)
@@ -140,6 +136,7 @@ export default function Sidebar({collapsed = false}: Props) {
                     <li key={item.key}>
                       <Link
                         href={href}
+                        onClick={() => onClose?.()}
                         className={`block pl-8 py-2 text-base cursor-pointer transition-colors ${
                           isActive
                             ? 'bg-blue-50 font-semibold'