This commit is contained in:
tangly1024
2023-03-25 15:19:27 +08:00
parent fadf797baa
commit 6a7fc8a2f2
5 changed files with 18 additions and 18 deletions

View File

@@ -1,5 +1,5 @@
import { useRouter } from 'next/router'
import React from 'react'
import { useEffect } from 'react'
/**
* 侧边栏抽屉面板,可以从侧面拉出
@@ -8,7 +8,7 @@ import React from 'react'
*/
const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
const router = useRouter()
React.useEffect(() => {
useEffect(() => {
const sideBarDrawerRouteListener = () => {
switchSideDrawerVisible(false)
}
@@ -38,7 +38,7 @@ const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
}
return <div id='sidebar-wrapper' className={' block md:hidden top-0 ' + className }>
<div id="sidebar-drawer" className={`${isOpen ? 'ml-0 w-56 visible' : '-ml-60 max-w-side invisible'} bg-white dark:bg-gray-900 shadow-black shadow-lg flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-30`}>
<div id="sidebar-drawer" className={`${isOpen ? 'ml-0 w-60 visible' : '-ml-60 max-w-side invisible'} bg-white dark:bg-gray-900 shadow-black shadow-lg flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-30`}>
{children}
</div>

View File

@@ -1,4 +1,4 @@
import React, { useCallback, useRef } from 'react'
import React, { useCallback, useEffect, useRef, useState } from 'react'
import throttle from 'lodash.throttle'
import { uuidToId } from 'notion-utils'
import { useGlobal } from '@/lib/global'
@@ -13,7 +13,7 @@ const Catalog = ({ toc }) => {
const { locale } = useGlobal()
// 监听滚动事件
React.useEffect(() => {
useEffect(() => {
window.addEventListener('scroll', actionSectionScrollSpy)
actionSectionScrollSpy()
return () => {
@@ -26,7 +26,7 @@ const Catalog = ({ toc }) => {
const tocIds = []
// 同步选中目录事件
const [activeSection, setActiveSection] = React.useState(null)
const [activeSection, setActiveSection] = useState(null)
const throttleMs = 200
const actionSectionScrollSpy = useCallback(throttle(() => {
const sections = document.getElementsByClassName('notion-h')

View File

@@ -35,14 +35,14 @@ export const MenuItemCollapse = ({ link }) => {
{!hasSubMenu && <Link href={link?.to}>
<div className='my-auto items-center justify-between flex '>
<i className={`${link.icon} w-4 mr-6 text-center`} />
{link.icon && <i className={`${link.icon} w-4 mr-6 text-center`} />}
<div >{link.name}</div>
</div>
{link.slot}
</Link>}
{hasSubMenu && <div onClick={hasSubMenu ? toggleOpenSubMenu : null} className='my-auto items-center w-full justify-between flex '>
<div className=''>{link?.name}</div>
<div className=''><i className={`${link.icon} w-4 mr-6 text-center`} />{link?.name}</div>
<i className={`px-2 fas fa-chevron-left transition-all duration-200 ${isOpen ? '-rotate-90' : ''}`}></i>
</div>}
</div>
@@ -50,9 +50,9 @@ export const MenuItemCollapse = ({ link }) => {
{/* 折叠子菜单 */}
{hasSubMenu && <Collapse isOpen={isOpen}>
{link.subMenus.map(sLink => {
return <div key={sLink.id} className='cursor-pointer dark:text-gray-200 w-full font-extralight dark:bg-black text-left px-10 justify-start bg-gray-100 hover:bg-indigo-700 hover:text-white dark:hover:bg-gray-900 tracking-widest transition-all duration-200 border-b dark:border-gray-800 py-3 pr-6'>
return <div key={sLink.id} className='cursor-pointer whitespace-nowrap dark:text-gray-200 w-full font-extralight dark:bg-black text-left px-5 justify-start bg-gray-100 hover:bg-indigo-700 hover:text-white dark:hover:bg-gray-900 tracking-widest transition-all duration-200 border-b dark:border-gray-800 py-3 pr-6'>
<Link href={sLink.to}>
<span className='text-sm'>{sLink.title}</span>
<span className='text-sm'><i className={`${sLink.icon} w-4 mr-3 text-center`} />{sLink.title}</span>
</Link>
</div>
})}

View File

@@ -1,4 +1,4 @@
import React, { useRef } from 'react'
import { useCallback, useEffect, useRef, useState } from 'react'
import throttle from 'lodash.throttle'
import { uuidToId } from 'notion-utils'
import Progress from './Progress'
@@ -15,10 +15,10 @@ const Catalog = ({ toc }) => {
// 目录自动滚动
const tRef = useRef(null)
// 同步选中目录事件
const [activeSection, setActiveSection] = React.useState(null)
const [activeSection, setActiveSection] = useState(null)
// 监听滚动事件
React.useEffect(() => {
useEffect(() => {
window.addEventListener('scroll', actionSectionScrollSpy)
actionSectionScrollSpy()
return () => {
@@ -27,7 +27,7 @@ const Catalog = ({ toc }) => {
}, [])
const throttleMs = 200
const actionSectionScrollSpy = React.useCallback(throttle(() => {
const actionSectionScrollSpy = useCallback(throttle(() => {
const sections = document.getElementsByClassName('notion-h')
let prevBBox = null
let currentSectionId = activeSection

View File

@@ -1,4 +1,4 @@
import React, { useRef } from 'react'
import { useCallback, useEffect, useRef, useState } from 'react'
import throttle from 'lodash.throttle'
import { uuidToId } from 'notion-utils'
import { useGlobal } from '@/lib/global'
@@ -12,7 +12,7 @@ import { useGlobal } from '@/lib/global'
const Catalog = ({ post }) => {
const { locale } = useGlobal()
// 监听滚动事件
React.useEffect(() => {
useEffect(() => {
window.addEventListener('scroll', actionSectionScrollSpy)
actionSectionScrollSpy()
return () => {
@@ -25,9 +25,9 @@ const Catalog = ({ post }) => {
const tocIds = []
// 同步选中目录事件
const [activeSection, setActiveSection] = React.useState(null)
const [activeSection, setActiveSection] = useState(null)
const throttleMs = 200
const actionSectionScrollSpy = React.useCallback(throttle(() => {
const actionSectionScrollSpy = useCallback(throttle(() => {
const sections = document.getElementsByClassName('notion-h')
let prevBBox = null
let currentSectionId = activeSection