d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-06-03 07:26:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

🏄‍ 瀑布流

Browse Source
This commit is contained in:
tangly1024
2021-09-27 17:21:25 +08:00
parent 98bbc014a3
commit f07b311dd3
6 changed files with 77 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
components/SideBar.js
View File

@@ -2,10 +2,11 @@ import Tags from '@/components/Tags'
import { useLocale } from '@/lib/locale'
import Link from 'next/link'
import BLOG from '@/blog.config'
import { useState } from 'react'
import { 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'
const SideBar = ({ tags, currentTag }) => {
const locale = useLocale()
@@ -18,16 +19,44 @@ const SideBar = ({ tags, currentTag }) => {
}
}
const [collapse, changeCollapse] = useState(false)
// 监听resize事件
useEffect(() => {
window.addEventListener('resize', resizeWindowHideToc)
resizeWindowHideToc()
return () => {
window.removeEventListener('resize', resizeWindowHideToc)
}
}, [])
const resizeWindowHideToc = throttle(() => {
if (window.innerWidth > 1300) {
changeCollapse(false)
} else {
changeCollapse(true)
}
}, 500)
const [collapse, changeCollapse] = useState(true)
return <aside
className={(collapse ? '' : '') + ' z-10 bg-white dark:bg-gray-800 dark:border-black duration-500 ease-in-out'}
className={(collapse ? '' : '') + ' z-10 duration-500 ease-in-out'}
>
<div className={(collapse ? '-ml-80 ' : 'shadow-2xl xl:shadow-none') + ' sidebar h-full w-60 md:w-80 duration-500 ease-in-out'}>
<div className={(collapse ? '-ml-80 ' : 'shadow-2xl xl:shadow-none') + ' dark:bg-gray-800 bg-white sidebar h-full w-60 md:w-80 duration-500 ease-in-out'}>
<section className='mx-5 pt-5'>
<Link href='/'>
<a
className='text-3xl hover:shadow-xl bg-white dark:bg-gray-800 dark:text-gray-300 font-semibold hover:bg-gray-800 hover:text-white p-2 duration-200'>{BLOG.title}</a>
</Link>
</section>
<section className='text-gray-500 text-sm px-6 pt-3 pb-5 dark:text-gray-300'>
<i className='fa fa-map-marker mr-1' />
Fuzhou, China
</section>
{/* 搜索框 */}
<div className='flex justify-center items-center py-5 pr-5 pl-2 bg-gray-100 dark:bg-black'>
<div className='flex justify-center items-center py-5 pr-5 pl-2 bg-gray-200 dark:bg-black'>
<input
type='text'
placeholder={
@@ -41,18 +70,6 @@ const SideBar = ({ tags, currentTag }) => {
<i className='fa fa-search text-gray-400 -ml-8' />
</div>
<section className='mx-5 py-5 flex'>
<Link href='/'>
<a
className='hover:shadow-xl dark:border-gray-600 border-gray-500 border-2 bg-white dark:bg-gray-800 dark:text-gray-300 font-semibold hover:bg-gray-800 hover:text-white p-2 duration-200'>{BLOG.title}</a>
</Link>
</section>
<section className='text-gray-500 px-5 dark:text-gray-300'>
<i className='fa fa-map-marker mr-1' />
Fuzhou, China
</section>
{/* <hr className='my-5' /> */}
<div className='p-5'>
@@ -62,8 +79,10 @@ const SideBar = ({ tags, currentTag }) => {
<Footer />
</div>
<div className={(collapse ? 'left-0' : 'md:left-80 left-60') + ' space-x-2 fixed md:absolute flex top-0 px-4 py-3 duration-500 ease-in-out'}>
<div className='my-4 text-xl p-1 rounded cursor-pointer text-center hover:scale-125 transform duration-200 bg-gray-100 bg-opacity-50 md:bg-opacity-0'>
<div className={(collapse ? 'left-0' : 'md:left-80 left-60') + ' space-x-2 fixed md:absolute flex top-0 px-4 py-1 duration-500 ease-in-out'}>
<div className='my-5 text-xl rounded cursor-pointer text-center hover:scale-125 transform duration-200 bg-gray-100 bg-opacity-50 md:bg-opacity-0
dark:bg-gray-600 dark:text-gray-300 dark:hover:bg-gray-100 dark:hover:text-black'>
<i className='fa fa-bars px-1' onClick={() => changeCollapse(!collapse)} />
</div>
<div className='my-4 bg-gray-100 bg-opacity-50 p-1 rounded md:bg-opacity-0'>