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

feature: collapse组件

Browse Source
This commit is contained in:
tangly1024
2022-01-11 13:44:30 +08:00
parent c70836a6a3
commit 9e6707149d
8 changed files with 77 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
components/MenuButtonGroup.js
View File

@@ -6,27 +6,30 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faArchive, faHome, faTag, faTh, faUser } from '@fortawesome/free-solid-svg-icons'
import BLOG from 'blog.config'
const MenuButtonGroup = ({ allowCollapse = false }) => {
const MenuButtonGroup = ({ allowCollapse = false, postCount }) => {
const { locale } = useGlobal()
const router = useRouter()
const archiveSlot = <div className='bg-gray-300 rounded-md text-gray-50 px-1 text-xs'>{postCount}</div>
const links = [
{ id: 0, icon: faHome, name: locale.NAV.INDEX, to: '/' || '/', show: true },
{ id: 1, icon: faArchive, name: locale.NAV.ARCHIVE, to: '/archive', show: BLOG.menu.showArchive },
{ id: 2, icon: faTh, name: locale.COMMON.CATEGORY, to: '/category', show: BLOG.menu.showCategory },
{ id: 3, icon: faTag, name: locale.COMMON.TAGS, to: '/tag', show: BLOG.menu.showTag },
{ id: 1, icon: faTh, name: locale.COMMON.CATEGORY, to: '/category', show: BLOG.menu.showCategory },
{ id: 2, icon: faTag, name: locale.COMMON.TAGS, to: '/tag', show: BLOG.menu.showTag },
{ id: 3, icon: faArchive, name: locale.NAV.ARCHIVE, to: '/archive', slot: archiveSlot, show: BLOG.menu.showArchive },
{ id: 4, icon: faUser, name: locale.NAV.ABOUT, to: '/about', show: BLOG.menu.showAbout }
]
return <nav id='nav' className='leading-8 text-gray-500 dark:text-gray-400 '>
return <nav id='nav' className='leading-8 text-gray-500 dark:text-gray-400 font-sans'>
{links.map(link => {
if (link.show) {
const selected = (router.pathname === link.to) || (router.asPath === link.to)
return <Link key={`${link.id}-${link.to}`} title={link.to} href={link.to} >
<a className={'py-1 my-1 px-5 mx-2 duration-300 text-base hover:bg-gray-700 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center ' +
<a className={'py-2 px-5 mx-2 duration-300 text-base justify-between hover:bg-gray-700 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center ' +
(selected ? 'bg-gray-200 text-black' : ' ')} >
<div className='my-auto justify-center flex '>
<FontAwesomeIcon icon={link.icon} />
<div className={'ml-4'}>{link.name}</div>
</div>
<div className={'ml-4'}>{link.name}</div>
{link.slot}
</a>
</Link>
} else {