Add GitBook theme structure with Traditional Chinese docs
This commit is contained in:
66
gitbook/components/CatalogDrawerWrapper.js
Normal file
66
gitbook/components/CatalogDrawerWrapper.js
Normal file
@@ -0,0 +1,66 @@
|
||||
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
|
Reference in New Issue
Block a user