gitbook导航文件夹悬停自动展开

themes/gitbook/components/NavPostItem.js

@@ -14,12 +14,20 @@ import BlogPostCard from './BlogPostCard'
 const NavPostItem = props => {
   const { group, expanded, toggleItem } = props // 接收传递的展开状态和切换函数
   // const [isOpen, setIsOpen] = useState(expanded) // 使用展开状态作为组件内部状态
+  const hoverExpand = siteConfig('GITBOOK_FOLDER_HOVER_EXPAND', false, CONFIG)
 
   // 当展开状态改变时触发切换函数，并根据传入的展开状态更新内部状态
   const toggleOpenSubMenu = () => {
     toggleItem() // 调用父组件传递的切换函数
     // setIsOpen(!expanded) // 更新内部状态为传入的展开状态的相反值
   }
+  const onHoverToggle = () => {
+    // 允许鼠标悬停时自动展开，而非点击展开
+    if (!hoverExpand) {
+      return
+    }
+    toggleOpenSubMenu()
+  }
 
   const groupHasLatest = group?.items?.some(post => post.isLatest)
 
@@ -27,13 +35,14 @@ const NavPostItem = props => {
     return (
       <>
         <div
+          onMouseEnter={onHoverToggle}
           onClick={toggleOpenSubMenu}
-          className='select-none relative flex justify-between text-sm cursor-pointer p-2 hover:bg-gray-50 rounded-md dark:hover:bg-yellow-100 dark:hover:text-yellow-600'
+          className='cursor-pointer relative flex justify-between text-sm p-2 hover:bg-gray-50 rounded-md dark:hover:bg-yellow-100 dark:hover:text-yellow-600'
           key={group?.category}>
           <span>{group?.category}</span>
           <div className='inline-flex items-center select-none pointer-events-none '>
             <i
-              className={`px-2 fas fa-chevron-left transition-all opacity-50 duration-200 ${expanded ? '-rotate-90' : ''}`}></i>
+              className={`px-2 fas fa-chevron-left transition-all opacity-50 duration-700 ${expanded ? '-rotate-90' : ''}`}></i>
           </div>
           {groupHasLatest &&
             siteConfig('GITBOOK_LATEST_POST_RED_BADGE', false, CONFIG) &&