67 lines
1.9 KiB
JavaScript
67 lines
1.9 KiB
JavaScript
import { useGlobal } from '@/lib/global'
|
|
import { useGitBookGlobal } from '@/themes/gitbook'
|
|
import { useRouter } from 'next/router'
|
|
import { useEffect } from 'react'
|
|
import Catalog from './Catalog'
|
|
|
|
/**
|
|
* 懸浮抽屜目錄
|
|
* @param toc
|
|
* @param post
|
|
* @returns {JSX.Element}
|
|
* @constructor
|
|
*/
|
|
const CatalogDrawerWrapper = ({ post, cRef }) => {
|
|
const { tocVisible, changeTocVisible } = useGitBookGlobal()
|
|
const { locale } = useGlobal()
|
|
const router = useRouter()
|
|
const switchVisible = () => {
|
|
changeTocVisible(!tocVisible)
|
|
}
|
|
useEffect(() => {
|
|
changeTocVisible(false)
|
|
}, [router])
|
|
return (
|
|
<>
|
|
<div
|
|
id='gitbook-toc-float'
|
|
className='fixed top-0 right-0 z-40 md:hidden'>
|
|
{/* 側邊選單 */}
|
|
<div
|
|
className={
|
|
(tocVisible
|
|
? 'animate__slideInRight '
|
|
: ' -mr-72 animate__slideOutRight') +
|
|
' overflow-y-hidden shadow-card w-60 duration-200 fixed right-1 bottom-16 rounded py-2 bg-white dark:bg-hexo-black-gray'
|
|
}>
|
|
{post && (
|
|
<>
|
|
<div className='px-4 pb-2 flex justify-between items-center border-b font-bold'>
|
|
<span>{locale.COMMON.TABLE_OF_CONTENTS}</span>
|
|
<i
|
|
className='fas fa-times p-1 cursor-pointer'
|
|
onClick={() => {
|
|
changeTocVisible(false)
|
|
}}></i>
|
|
</div>
|
|
<div className='dark:text-gray-400 text-gray-600 px-3'>
|
|
<Catalog post={post} />
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{/* 背景遮罩 */}
|
|
<div
|
|
id='right-drawer-background'
|
|
className={
|
|
(tocVisible ? 'block' : 'hidden') +
|
|
' fixed top-0 left-0 z-30 w-full h-full'
|
|
}
|
|
onClick={switchVisible}
|
|
/>
|
|
</>
|
|
)
|
|
}
|
|
export default CatalogDrawerWrapper
|