mobile-gitbook

This commit is contained in:
tangly1024
2023-06-24 12:35:42 +08:00
parent c4ad41b0b6
commit 6a413fbdb2
5 changed files with 67 additions and 25 deletions

View File

@@ -3,34 +3,36 @@ import React from 'react'
import { useMediumGlobal } from '../LayoutBase'
import JumpToTopButton from './JumpToTopButton'
export default function BottomMenuBar ({ post, className }) {
const { tocVisible, changeTocVisible } = useMediumGlobal()
export default function BottomMenuBar({ post, className }) {
const { tocVisible, changeTocVisible, pageNavVisible, changePageNavVisible } = useMediumGlobal()
const showTocBotton = post?.toc?.length > 0
const toggleToc = () => {
changeTocVisible(!tocVisible)
}
const togglePageNavVisible = () => {
changePageNavVisible(!pageNavVisible)
}
return (
<div className={'sticky z-10 bottom-0 w-full h-12 bg-white dark:bg-hexo-black-gray ' + className}>
<div className='flex justify-between h-full shadow-card'>
<Link href='/search' passHref legacyBehavior>
<div className='flex w-full items-center justify-center cursor-pointer'>
<i className='fas fa-search'/>
</div>
</Link>
<div className='flex w-full items-center justify-center cursor-pointer'>
<JumpToTopButton/>
<div className={'sticky z-10 bottom-0 w-full h-12 bg-white dark:bg-hexo-black-gray ' + className}>
<div className='flex justify-between h-full shadow-card'>
<div onClick={togglePageNavVisible} className='flex w-full items-center justify-center cursor-pointer'>
<i className="fa-regular fa-chart-bar"></i>
</div>
<div className='flex w-full items-center justify-center cursor-pointer'>
<JumpToTopButton />
</div>
{showTocBotton && <div onClick={toggleToc} className='flex w-full items-center justify-center cursor-pointer'>
<i className='fas fa-list-ol ' />
</div>}
{!showTocBotton && <Link href='/' passHref legacyBehavior>
<div className='flex w-full items-center justify-center cursor-pointer'>
<i className='fas fa-home' />
</div>
</Link>}
</div>
</div>
{showTocBotton && <div onClick={toggleToc} className='flex w-full items-center justify-center cursor-pointer'>
<i className='fas fa-list-ol ' />
</div>}
{ !showTocBotton && <Link href='/' passHref legacyBehavior>
<div className='flex w-full items-center justify-center cursor-pointer'>
<i className='fas fa-home' />
</div>
</Link>}
</div>
</div>
)
}