This commit is contained in:
tangly1024
2023-06-24 16:08:25 +08:00
parent 587c51b59f
commit 5a6ffc241d
6 changed files with 36 additions and 19 deletions

View File

@@ -1,15 +1,9 @@
import Link from 'next/link'
import React from 'react'
import { useMediumGlobal } from '../LayoutBase'
import JumpToTopButton from './JumpToTopButton'
export default function BottomMenuBar({ post, className }) {
const { tocVisible, changeTocVisible, pageNavVisible, changePageNavVisible } = useMediumGlobal()
const showTocBotton = post?.toc?.length > 0
const toggleToc = () => {
changeTocVisible(!tocVisible)
}
const { pageNavVisible, changePageNavVisible } = useMediumGlobal()
const togglePageNavVisible = () => {
changePageNavVisible(!pageNavVisible)
@@ -19,19 +13,11 @@ export default function BottomMenuBar({ post, className }) {
<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>
<i className="fa-solid fa-book"></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>
)

View File

@@ -0,0 +1,22 @@
import { useMediumGlobal } from '../LayoutBase'
export default function FloatTocButton () {
const { tocVisible, changeTocVisible } = useMediumGlobal()
const toggleToc = () => {
changeTocVisible(!tocVisible)
}
return (
<div
onClick={toggleToc}
className={ 'text-black dark:border-gray-500 flex justify-center items-center dark:text-gray-200 py-2 px-2'
}
>
<a
id="darkModeButton"
className={'fa-list-ol hover:cursor-pointer fas hover:scale-150 transform duration-200'}
/>
</div>
)
}

View File

@@ -32,7 +32,7 @@ export const MenuItemCollapse = (props) => {
}
return <>
<div className={ (selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600') + ' px-5 w-full text-left duration-200 dark:bg-hexo-black-gray dark:border-black'} onClick={toggleShow} >
<div className={ (selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600') + ' px-7 w-full text-left duration-200 dark:bg-hexo-black-gray dark:border-black'} onClick={toggleShow} >
{!hasSubMenu && <Link href={link?.to} className='py-2 w-full my-auto items-center justify-between flex '>
<div><div className={`${link.icon} text-center w-4 mr-4`} />{link.name}</div>

View File

@@ -18,7 +18,7 @@ const PageNavDrawer = ({ post, cRef }) => {
<div id='gitbook-left-float' className='fixed top-0 left-0 z-40'>
{/* 侧边菜单 */}
<div
className={(pageNavVisible ? 'animate__slideInLeft ' : ' -ml-72 animate__slideOutLeft') +
className={(pageNavVisible ? 'animate__slideInLeft ' : '-ml-80 animate__slideOutLeft') +
' overflow-y-hidden shadow-card w-72 duration-200 fixed left-1 bottom-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'>
{/* 所有文章列表 */}