feature： 封装组件

layouts/BaseLayout.js

@@ -8,9 +8,8 @@ import SideAreaLeft from '@/components/SideAreaLeft'
 import SideAreaRight from '@/components/SideAreaRight'
 import TopNav from '@/components/TopNav'
 import { useGlobal } from '@/lib/global'
-import throttle from 'lodash.throttle'
 import PropTypes from 'prop-types'
-import React, { useCallback, useEffect, useRef } from 'react'
+import React, { useRef } from 'react'
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
  * @param children
@@ -43,26 +42,6 @@ const BaseLayout = ({
   categories,
   ...customMeta
 }) => {
-  let windowTop = 0
-  const scrollTrigger = useCallback(throttle(() => {
-    const scrollS = window.scrollY
-    if (scrollS >= windowTop && scrollS > 10) {
-      handleScrollDown()
-      windowTop = scrollS
-    } else {
-      handleScrollUp()
-      windowTop = scrollS
-    }
-  }, 200))
-
-  // 监听滚动
-  useEffect(() => {
-    window.addEventListener('scroll', scrollTrigger)
-    scrollTrigger()
-    return () => {
-      window.removeEventListener('scroll', scrollTrigger)
-    }
-  }, [])
   const { onLoading } = useGlobal()
   const targetRef = useRef(null)
 
@@ -78,7 +57,7 @@ const BaseLayout = ({
           <aside id='left' className='hidden lg:block flex-col w-60 mr-4'>
             <SideAreaLeft targetRef={targetRef} post={post} posts={totalPosts} tags={tags} currentSearch={currentSearch} currentTag={currentTag} categories={categories} currentCategory={currentCategory}/>
           </aside>
-          <section id='center' className='flex-grow max-w-4xl min-h-screen' ref={targetRef}>
+          <section id='center' className='flex-grow mt-14 md:mt-0 max-w-4xl min-h-screen overflow-x-auto' ref={targetRef}>
             {onLoading
               ? <LoadingCover/>
               : <>
@@ -99,37 +78,6 @@ const BaseLayout = ({
   )
 }
 
-/**
- * 隐藏导航
- * 划到页面下方
- */
-const handleScrollDown = () => {
-  if (document) {
-    const nav = document.querySelector('#sticky-nav')
-    nav && nav.classList.replace('top-0', '-top-16')
-
-    const stickyBar = document.querySelector('#sticky-bar')
-    stickyBar && stickyBar.classList.replace('top-14', 'top-0')
-
-    const tocDrawerButton = document.querySelector('#toc-drawer-button')
-    tocDrawerButton && tocDrawerButton.classList.replace('hidden', 'block')
-  }
-}
-
-/**
- * 显示导航
- * 划到顶部
- */
-const handleScrollUp = () => {
-  if (document) {
-    const nav = document.querySelector('#sticky-nav')
-    nav && nav.classList.replace('-top-16', 'top-0')
-
-    const stickyBar = document.querySelector('#sticky-bar')
-    stickyBar && stickyBar.classList.replace('top-0', 'top-14')
-  }
-}
-
 BaseLayout.propTypes = {
   children: PropTypes.node
 }