Skip to content

Commit

Permalink
Merge pull request tangly1024#2753 from tangly1024/feat/gitbook-auto-…
Browse files Browse the repository at this point in the history
…expand

gitbook 导航文件夹hover-expand适配移动端
  • Loading branch information
tangly1024 authored Sep 22, 2024
2 parents 0953cbc + 86289a7 commit 6d01c58
Showing 1 changed file with 19 additions and 3 deletions.
22 changes: 19 additions & 3 deletions themes/gitbook/components/NavPostItem.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import Badge from '@/components/Badge'
import Collapse from '@/components/Collapse'
import { siteConfig } from '@/lib/config'
import { useEffect, useState } from 'react'
import CONFIG from '../config'
import BlogPostCard from './BlogPostCard'

Expand All @@ -13,17 +14,32 @@ 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 [isTouchDevice, setIsTouchDevice] = useState(false)

// 检测是否为触摸设备
useEffect(() => {
const checkTouchDevice = () => {
if (window.matchMedia('(pointer: coarse)').matches) {
setIsTouchDevice(true)
}
}
checkTouchDevice()

// 可选:监听窗口大小变化时重新检测
window.addEventListener('resize', checkTouchDevice)
return () => {
window.removeEventListener('resize', checkTouchDevice)
}
}, [])

// 当展开状态改变时触发切换函数,并根据传入的展开状态更新内部状态
const toggleOpenSubMenu = () => {
toggleItem() // 调用父组件传递的切换函数
// setIsOpen(!expanded) // 更新内部状态为传入的展开状态的相反值
}
const onHoverToggle = () => {
// 允许鼠标悬停时自动展开,而非点击展开
if (!hoverExpand) {
if (!hoverExpand || isTouchDevice) {
return
}
toggleOpenSubMenu()
Expand Down

0 comments on commit 6d01c58

Please sign in to comment.