d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 15:09:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

fukasawa-折叠侧边栏

Browse Source
This commit is contained in:
tangly1024.com
2023-07-04 17:41:22 +08:00
parent 9853929eb6
commit c4f4156f7f
1 changed files with 55 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
themes/fukasawa/components/AsideLeft.js
View File

@@ -9,60 +9,74 @@ import Announcement from './Announcement'
import { useRouter } from 'next/router'
import DarkModeButton from '@/components/DarkModeButton'
import SocialButton from './SocialButton'
import { useState } from 'react'
function AsideLeft (props) {
function AsideLeft(props) {
const { tagOptions, currentTag, categoryOptions, currentCategory, post, slot, siteInfo, notice } = props
const router = useRouter()
return <div className='sideLeft relative w-80 bg-white dark:bg-hexo-black-gray min-h-screen px-10 py-14 hidden lg:block z-20'>
<Logo {...props}/>
const [open, setOpen] = useState(true)
// 折叠侧边栏
const toggleOpen = () => {
setOpen(!open)
}
return <div className={`sideLeft relative ${open ? 'w-80' : 'w-0'} duration-150 transition-all bg-white dark:bg-hexo-black-gray min-h-screen hidden lg:block z-20`}>
{/* 折叠按钮 */}
<div className={`${open ? 'ml-80' : ''} hidden lg:block sticky top-0 mx-2 cursor-pointer hover:scale-110 duration-150 px-3 py-2`} onClick={toggleOpen}>
{open ? <i className='fas fa-bars text-xl'></i> : <i className="fa-solid fa-indent text-xl"></i>}
</div>
<section className='siteInfo flex flex-col dark:text-gray-300 pt-8'>
{ siteInfo?.description }
</section>
<div className={` ${open ? 'px-10' : 'hidden'}`}>
<section className='flex flex-col text-gray-600'>
<div className='w-12 my-4' />
<MenuList {...props}/>
</section>
<Logo {...props} />
<section className='flex flex-col text-gray-600'>
<div className='w-12 my-4' />
<SearchInput {...props}/>
</section>
<section className='siteInfo flex flex-col dark:text-gray-300 pt-8'>
{siteInfo?.description}
</section>
<section className='flex flex-col dark:text-gray-300'>
<div className='w-12 my-4' />
<Announcement post={notice}/>
</section>
<section className='flex flex-col text-gray-600'>
<div className='w-12 my-4' />
<MenuList {...props} />
</section>
{router.asPath !== '/tag' && <section className='flex flex-col'>
<div className='w-12 my-4' />
<GroupTag tags={tagOptions} currentTag={currentTag}/>
</section>}
<section className='flex flex-col text-gray-600'>
<div className='w-12 my-4' />
<SearchInput {...props} />
</section>
{router.asPath !== '/category' && <section className='flex flex-col'>
<div className='w-12 my-4' />
<GroupCategory categories={categoryOptions} currentCategory={currentCategory}/>
</section>}
<section className='flex flex-col dark:text-gray-300'>
<div className='w-12 my-4' />
<Announcement post={notice} />
</section>
<section className='flex flex-col'>
<div className='w-12 my-4' />
<SocialButton/>
<SiteInfo/>
</section>
{router.asPath !== '/tag' && <section className='flex flex-col'>
<div className='w-12 my-4' />
<GroupTag tags={tagOptions} currentTag={currentTag} />
</section>}
<section className='flex justify-center dark:text-gray-200'>
<DarkModeButton/>
</section>
{router.asPath !== '/category' && <section className='flex flex-col'>
<div className='w-12 my-4' />
<GroupCategory categories={categoryOptions} currentCategory={currentCategory} />
</section>}
<section className='sticky top-0 pt-12'>
<Catalog toc={post?.toc}/>
<div className='flex justify-center'>
<div>{slot}</div>
</div>
</section>
<section className='flex flex-col'>
<div className='w-12 my-4' />
<SocialButton />
<SiteInfo />
</section>
</div>
<section className='flex justify-center dark:text-gray-200 pt-4'>
<DarkModeButton />
</section>
<section className='sticky top-0 pt-12'>
<Catalog toc={post?.toc} />
<div className='flex justify-center'>
<div>{slot}</div>
</div>
</section>
</div>
</div>
}
export default AsideLeft