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

分页模式加载文章预览

Browse Source
This commit is contained in:
tangly1024
2022-01-07 17:49:51 +08:00
parent c89048178e
commit f84409e97f
21 changed files with 143 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
components/TopNav.js
View File

@@ -3,10 +3,10 @@ import SideBarDrawer from '@/components/SideBarDrawer'
import { useGlobal } from '@/lib/global'
import { faBars, faSearch } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import Link from 'next/link'
import { useCallback, useEffect, useRef } from 'react'
import SearchDrawer from './SearchDrawer'
import throttle from 'lodash.throttle'
import { useCallback, useEffect, useRef } from 'react'
import Logo from './Logo'
import SearchDrawer from './SearchDrawer'
let windowTop = 0
@@ -35,7 +35,7 @@ const TopNav = ({ tags, currentTag, post, slot, categories, currentCategory, aut
// 监听滚动
useEffect(() => {
if (BLOG.autoCollapsedNavBar) {
if (BLOG.topNavType === 'autoCollapse') {
scrollTrigger()
window.addEventListener('scroll', scrollTrigger)
}
@@ -43,30 +43,28 @@ const TopNav = ({ tags, currentTag, post, slot, categories, currentCategory, aut
BLOG.autoCollapsedNavBar && window.removeEventListener('scroll', scrollTrigger)
}
}, [])
return (<div id='top-nav' className='sticky top-0 z-40 block lg:hidden'>
return (<div id='top-nav' className='z-40 block lg:hidden'>
{/* 侧面抽屉 */}
<SideBarDrawer post={post} currentTag={currentTag} cRef={drawer} tags={tags} slot={slot} categories={categories} currentCategory={currentCategory}/>
<SearchDrawer cRef={searchDrawer}/>
{/* 导航栏 */}
<div id='sticky-nav' className='flex animate__animated animate__fadeIn fixed lg:relative w-full top-0 z-20 transform duration-500'>
<div className='w-full flex justify-between items-center p-4 glassmorphism'>
<div id='sticky-nav' className={`${BLOG.topNavType !== 'normal' ? 'fixed' : ''} flex animate__animated animate__fadeIn lg:relative w-full top-0 z-20 transform duration-500`}>
<div className='w-full flex justify-between items-center p-4 bg-black text-white'>
{/* 左侧LOGO 标题 */}
<div className='flex flex-none flex-grow-0'>
<div onClick={() => { drawer.current.handleSwitchSideDrawerVisible() }}
className='w-8 cursor-pointer dark:text-gray-300'>
className='w-8 cursor-pointer'>
<FontAwesomeIcon icon={faBars} size={'lg'}/>
</div>
</div>
<Link href='/' passHref>
<a>
<h1 className='cursor-pointer ml-2 w-full hover:scale-105 duration-200 transform font-serif dark:text-gray-200 whitespace-nowrap overflow-x-hidden'>{ BLOG.title }</h1>
</a>
</Link>
<div className='flex'>
<Logo/>
</div>
{/* 右侧功能 */}
<div className='mr-1 flex flex-nowrap flex-grow justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
<div className='mr-1 flex justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
<div className="cursor-pointer block lg:hidden" onClick={() => { searchDrawer?.current?.show() }}>
<FontAwesomeIcon icon={faSearch} className="mr-2" />{locale.NAV.SEARCH}
</div>