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

4.0 仿Youtube界面样式

Browse Source
This commit is contained in:
tangly1024
2021-10-11 17:14:52 +08:00
parent 3d02b0f6e2
commit 05d79a3db9
22 changed files with 391 additions and 300 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
components/SideBar.js
View File

@@ -1,134 +0,0 @@
import Tags from '@/components/Tags'
import { useLocale } from '@/lib/locale'
import Link from 'next/link'
import BLOG from '@/blog.config'
import React, { useEffect, useState } from 'react'
import Router, { useRouter } from 'next/router'
import DarkModeButton from '@/components/DarkModeButton'
import Footer from '@/components/Footer'
import throttle from 'lodash.throttle'
import TocBar from '@/components/TocBar'
import SocialButton from '@/components/SocialButton'
const SideBar = ({ tags, currentTag, post }) => {
const locale = useLocale()
const router = useRouter()
const [searchValue, setSearchValue] = useState('')
const handleKeyUp = (e) => {
if (e.keyCode === 13) {
Router.push({ pathname: '/', query: { s: searchValue } })
}
}
// 监听resize事件
useEffect(() => {
window.addEventListener('resize', collapseSideBar)
collapseSideBar()
return () => {
window.removeEventListener('resize', collapseSideBar)
}
}, [])
const collapseSideBar = throttle(() => {
if (window.innerWidth > 1300) {
changeCollapse(false)
} else {
changeCollapse(true)
}
}, 500)
const [collapse, changeCollapse] = useState(true)
return <aside className='z-10'>
<div
className={(collapse ? '-ml-80 ' : 'shadow-2xl xl:shadow-none ') + ' dark:bg-gray-800 bg-white sidebar h-full w-72 duration-500 ease-in-out'}>
{/* Logo */}
<section className='flex border-b px-5 pt-8 pb-6 flex-col sticky top-0 bg-white dark:bg-gray-800 z-10'>
<Link href='/'>
<div
className='mx-auto text-center cursor-pointer text-3xl dark:bg-gray-900 dark:text-gray-300 font-semibold dark:hover:bg-gray-600 bg-gray-700 text-white p-2 hover:scale-105 hover:shadow-2xl duration-200 transform'>{BLOG.title}</div>
</Link>
<i className='mx-auto fa fa-map-marker pl-1 dark:text-gray-300 mt-5' >&nbsp;Fuzhou, China</i>
</section>
{/* 搜索框 */}
<section className={ (post ? ' ' : ' sticky top-36 ') + ' z-20 border-t border-b flex justify-center items-center py-5 pr-5 pl-2 bg-gray-100 dark:bg-black'}>
<input
type='text'
placeholder={
currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`
}
className='shadow-inner duration-200 pl-2 rounded w-full py-2 border dark:border-gray-600 bg-white text-black dark:bg-gray-700 dark:text-white'
onKeyUp={handleKeyUp}
onChange={e => setSearchValue(e.target.value)}
defaultValue={router.query.s ?? ''}
/>
<i className='fa fa-search text-gray-400 -ml-8' />
</section>
{/* wrapper */}
<div className={ (post ? ' ' : ' ') + 'px-6'}>
{/* 菜单 */}
<nav className='mt-6'>
<strong className='text-2xl text-gray-600 dark:text-gray-400'>菜单</strong>
<ul className='mt-4 leading-8 text-gray-500 dark:text-gray-400'>
<li><a className='fa fa-info hover:underline' href='/article/about' id='about'><span
className='ml-2'>关于本站</span></a></li>
<li><a className='fa fa-rss hover:underline' href='/feed' target='_blank' id='feed'><span
className='ml-2'>RSS订阅</span></a></li>
<li></li>
</ul>
</nav>
{/* 标签云 */}
<section className='mt-6'>
<strong className='text-2xl text-gray-600 dark:text-gray-400'>标签</strong>
<div className='mt-4'>
<Tags tags={tags} currentTag={currentTag} />
</div>
</section>
{/* 联系 */}
<section>
<div className='mt-6'>
<strong className='text-2xl text-gray-600 dark:text-gray-400'>联系我</strong>
<div className='mt-2 py-2'>
<SocialButton />
</div>
</div>
</section>
{/* 站点信息 */}
<section className='my-3'>
<Footer />
</section>
</div>
{post && (
<div className='sticky top-36'>
<TocBar toc={post.toc} />
</div>
)}
</div>
{/* 顶部菜单按钮 */}
<div
className={(collapse ? 'left-0' : 'left-72') + ' z-30 fixed flex flex-nowrap md:flex-col top-0 pl-4 py-1 duration-500 ease-in-out'}>
{/* 菜单折叠 */}
<div className='p-1 border hover:shadow-xl duration-200 dark:border-gray-500 h-12 bg-white dark:bg-gray-600 dark:bg-opacity-70 bg-opacity-70
dark:hover:bg-gray-100 text-xl cursor-pointer mr-2 my-2 dark:text-gray-300 dark:hover:text-black'>
<i className='fa fa-bars p-2.5 hover:scale-125 transform duration-200'
onClick={() => changeCollapse(!collapse)} />
</div>
{/* 夜间模式 */}
<DarkModeButton />
</div>
</aside>
}
export default SideBar