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

Feature:

Browse Source 
三列排版
This commit is contained in:
tangly1024
2021-12-20 15:39:05 +08:00
parent 44121bf50b
commit 44df05243c
20 changed files with 230 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
components/SideArea.js
View File

@@ -1,15 +1,13 @@
import React from 'react'
import MenuButtonGroup from '@/components/MenuButtonGroup'
import InfoCard from '@/components/InfoCard'
import TagGroups from '@/components/TagGroups'
import LatestPostsGroup from '@/components/LatestPostsGroup'
import CategoryGroup from '@/components/CategoryGroup'
import InfoCard from '@/components/InfoCard'
import MenuButtonGroup from '@/components/MenuButtonGroup'
import SearchInput from '@/components/SearchInput'
import Link from 'next/link'
import { useGlobal } from '@/lib/global'
import Toc from '@/components/Toc'
import { useGlobal } from '@/lib/global'
import { faAngleDoubleRight, faThList } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faAngleDoubleRight, faArchive, faTags, faThList } from '@fortawesome/free-solid-svg-icons'
import Link from 'next/link'
import React from 'react'
/**
* 侧边平铺
@@ -26,36 +24,26 @@ import { faAngleDoubleRight, faArchive, faTags, faThList } from '@fortawesome/fr
const SideArea = ({ title, tags, currentTag, post, posts, categories, currentCategory, currentSearch }) => {
const { locale } = useGlobal()
return <aside id='sidebar' className='w-72 z-10 scroll-hidden h-full'>
return <aside id='sidebar' className='scroll-hidden h-full w-72 z-10'>
<section className='hidden lg:block bg-white dark:bg-gray-800 rounded-xl hover:shadow-2xl duration-200 py-8 shadow-lg'>
<InfoCard />
</section>
<div className={(!post ? 'sticky top-5' : '') + ' pb-4'}>
<div className={(!post ? 'sticky top-2' : '') + ' pb-4'}>
<section className='hidden lg:block bg-white dark:bg-gray-800 rounded-xl hover:shadow-2xl duration-200 py-8 shadow-lg'>
<InfoCard />
</section>
{/* 菜单 */}
<section className='hidden lg:block mt-5 py-4 rounded-xl shadow-lg bg-white dark:bg-gray-800 hover:shadow-2xl duration-200'>
<section className='hidden lg:block mt-5 py-5 rounded-xl shadow-lg bg-white dark:bg-gray-800 hover:shadow-2xl duration-200'>
<MenuButtonGroup allowCollapse={true} />
<div className='px-5 pt-2'>
<SearchInput currentTag={currentTag} currentSearch={currentSearch} />
</div>
</section>
{/* 最新文章 */}
{posts && (
<section className='rounded-xl shadow-lg py-4 mt-5 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200'>
<div className='text-sm pb-2 px-5 flex flex-nowrap justify-between'>
<div className='font-light text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faArchive} className='mr-2' />{locale.COMMON.LATEST_POSTS}</div>
</div>
<LatestPostsGroup posts={posts} />
</section>
)}
{/* 分类 */}
{categories && (
{!post && categories && (
<section className='rounded-xl shadow-lg py-4 mt-5 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200'>
<div className='text-sm px-5 flex flex-nowrap justify-between font-light'>
<div className='text-sm px-5 mb-2 flex flex-nowrap justify-between font-light'>
<div className='pb-1 text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faThList} className='mr-2' />{locale.COMMON.CATEGORY}</div>
<Link href='/category' passHref>
<a className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
@@ -67,26 +55,10 @@ const SideArea = ({ title, tags, currentTag, post, posts, categories, currentCat
</section>
)}
{/* 标签云 */}
{tags && (
<section className='rounded-xl shadow-lg py-4 mt-5 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200'>
<div className='text-sm pb-1 px-5 flex flex-nowrap justify-between font-light dark:text-gray-200'>
<div className='text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faTags} className='mr-2'/>{locale.COMMON.TAGS}</div>
<Link href='/tag' passHref>
<a className='text-gray-400 hover:text-black dark:hover:text-white hover:underline cursor-pointer'>
{locale.COMMON.MORE} <FontAwesomeIcon icon={faAngleDoubleRight} />
</a>
</Link>
</div>
<div className='px-5 pt-2'>
<TagGroups tags={tags} currentTag={currentTag} />
</div>
</section>
)}
</div>
{post && post.toc && post.toc.length > 1 && (
<section id='left-toc' className='sticky pb-20 top-6 rounded-xl shadow-lg bg-white dark:bg-gray-800 hover:shadow-2xl duration-200'>
<section id='left-toc' className='sticky top-6 pb-20 rounded-xl shadow-lg bg-white dark:bg-gray-800 hover:shadow-2xl duration-200'>
<div className='border-b text-2xl bg-white text-black rounded-t-xl dark:border-gray-700 dark:bg-gray-700 dark:text-white py-6 px-6'>
{locale.COMMON.TABLE_OF_CONTENTS}
</div>
@@ -94,8 +66,6 @@ const SideArea = ({ title, tags, currentTag, post, posts, categories, currentCat
</section>
)}
{/* <section id='blank' className='bg-white dark:bg-gray-800 py-20' /> */}
</aside>
}
export default SideArea