mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-05-15 07:26:48 +00:00
50 lines
1.8 KiB
JavaScript
50 lines
1.8 KiB
JavaScript
import { useGitBookGlobal } from '@/themes/gitbook'
|
||
import NavPostList from './NavPostList'
|
||
|
||
/**
|
||
* 悬浮抽屉 页面内导航
|
||
* @param toc
|
||
* @param post
|
||
* @returns {JSX.Element}
|
||
* @constructor
|
||
*/
|
||
const PageNavDrawer = (props) => {
|
||
const { pageNavVisible, changePageNavVisible } = useGitBookGlobal()
|
||
const { filteredNavPages } = props
|
||
|
||
const groupedArray = filteredNavPages.reduce((groups, item) => {
|
||
const categoryName = item?.category ? item?.category : '' // 将category转换为字符串
|
||
const lastGroup = groups[groups.length - 1] // 获取最后一个分组
|
||
|
||
if (!lastGroup || lastGroup?.category !== categoryName) { // 如果当前元素的category与上一个元素不同，则创建新分组
|
||
groups.push({ category: categoryName, items: [] })
|
||
}
|
||
|
||
groups[groups.length - 1].items.push(item) // 将元素加入对应的分组
|
||
|
||
return groups
|
||
}, [])
|
||
|
||
const switchVisible = () => {
|
||
changePageNavVisible(!pageNavVisible)
|
||
}
|
||
|
||
return <>
|
||
<div id='gitbook-left-float' className='fixed top-0 left-0 z-40 md:hidden'>
|
||
{/* 侧边菜单 */}
|
||
<div
|
||
className={(pageNavVisible ? 'animate__slideInLeft ' : '-ml-80 animate__slideOutLeft') +
|
||
' overflow-y-hidden shadow-card w-72 duration-200 fixed left-1 top-16 rounded py-2 bg-white dark:bg-gray-600'}>
|
||
<div className='dark:text-gray-400 text-gray-600 h-96 overflow-y-scroll p-3'>
|
||
{/* 所有文章列表 */}
|
||
<NavPostList groupedArray={groupedArray} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/* 背景蒙版 */}
|
||
<div id='left-drawer-background' className={(pageNavVisible ? 'block' : 'hidden') + ' fixed top-0 left-0 z-30 w-full h-full'}
|
||
onClick={switchVisible} />
|
||
</>
|
||
}
|
||
export default PageNavDrawer
|