d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-13 23:16:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Gitbook 主题；底部菜单样式调整

Browse Source
This commit is contained in:
tangly1024.com
2024-11-19 14:44:32 +08:00
parent 7b0efe5647
commit ed947d866e
3 changed files with 35 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
themes/gitbook/components/BottomMenuBar.js
View File

@@ -1,5 +1,5 @@
import MobileButtonCatalog from './MobileButtonCatalog'
import MobileButtonPageNav from './MobileButtonPageNav'
import { useGlobal } from '@/lib/global'
import { useGitBookGlobal } from '..'
/**
* 移动端底部导航
@@ -8,20 +8,43 @@ import MobileButtonPageNav from './MobileButtonPageNav'
*/
export default function BottomMenuBar({ post, className }) {
const showTocButton = post?.toc?.length > 1
const { locale } = useGlobal()
const { pageNavVisible, changePageNavVisible, tocVisible, changeTocVisible } =
useGitBookGlobal()
const togglePageNavVisible = () => {
changePageNavVisible(!pageNavVisible)
}
const toggleToc = () => {
changeTocVisible(!tocVisible)
}
return (
<>
{/* 移动端底部导航按钮 */}
<div className='pb-2 dark:bg-hexo-black-gray bottom-button-group md:hidden w-screen h-14 px-4 fixed flex items-center justify-between right-left bottom-0 z-30 bg-white border-t dark:border-gray-800'>
<div className='w-full'>
<MobileButtonPageNav />
</div>
<div className='md:hidden fixed bottom-0 left-0 z-50 w-full h-16 bg-white border-t border-gray-200 dark:bg-gray-700 dark:border-gray-600'>
<div
className={`grid h-full max-w-lg mx-auto font-medium ${showTocButton && 'grid-cols-2'}`}>
<button
type='button'
onClick={togglePageNavVisible}
className='inline-flex flex-col items-center justify-center px-5 border-gray-200 border-x hover:bg-gray-50 dark:hover:bg-gray-800 group dark:border-gray-600'>
<i className='fa-book fas w-5 h-5 mb-2 text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-500' />
<span class='text-sm text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-500'>
{locale.COMMON.ARTICLE_LIST}
</span>
</button>
{showTocButton && (
<div className='w-full'>
<MobileButtonCatalog />
</div>
<button
type='button'
onClick={toggleToc}
className='inline-flex flex-col items-center justify-center px-5 border-gray-200 border-x hover:bg-gray-50 dark:hover:bg-gray-800 group dark:border-gray-600'>
<i className='fa-list-ol fas w-5 h-5 mb-2 text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-500' />
<span class='text-sm text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-500'>
{locale.COMMON.TABLE_OF_CONTENTS}
</span>
</button>
)}
</div>
</>
</div>
)
}

31
themes/gitbook/components/MobileButtonCatalog.js
View File

@@ -1,31 +0,0 @@
import { useGlobal } from '@/lib/global'
import { useGitBookGlobal } from '@/themes/gitbook'
/**
* 移动端目录按钮
*/
export default function MobileButtonCatalog() {
const { tocVisible, changeTocVisible } = useGitBookGlobal()
const { locale } = useGlobal()
const toggleToc = () => {
changeTocVisible(!tocVisible)
}
return (
<div
onClick={toggleToc}
className={
'text-black flex justify-center items-center dark:text-gray-200 dark:bg-hexo-black-gray py-2 px-2'
}>
<a
id='toc-button'
className={
'space-x-4 cursor-pointer hover:scale-150 transform duration-200'
}>
<i className='fa-list-ol fas' />
<span>{locale.COMMON.TABLE_OF_CONTENTS}</span>
</a>
</div>
)
}

30
themes/gitbook/components/MobileButtonPageNav.js
View File

@@ -1,30 +0,0 @@
import { useGlobal } from '@/lib/global'
import { useGitBookGlobal } from '@/themes/gitbook'
/**
* 移动端文章导航按钮
*/
export default function MobileButtonPageNav() {
const { pageNavVisible, changePageNavVisible } = useGitBookGlobal()
const { locale } = useGlobal()
const togglePageNavVisible = () => {
changePageNavVisible(!pageNavVisible)
}
return (
<div
onClick={togglePageNavVisible}
className={
'text-black flex justify-center items-center dark:text-gray-200 dark:bg-hexo-black-gray py-2 px-2'
}>
<a
id='nav-button'
className={
'space-x-4 cursor-pointer hover:scale-150 transform duration-200'
}>
<i className='fa-book fas' />
<span>{locale.COMMON.ARTICLE_LIST}</span>
</a>
</div>
)
}