Files
NotionNext/themes/next/components/MenuButtonGroup.js
2023-03-19 19:06:33 +08:00

44 lines
1.7 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import React from 'react'
import { useGlobal } from '@/lib/global'
import CONFIG_NEXT from '../config_next'
import BLOG from '@/blog.config'
import { DropMenu } from './DropMenu'
import { CollapseMenu } from './CollapseMenu'
const MenuButtonGroup = (props) => {
const { postCount, customNav, customMenu } = props
const { locale } = useGlobal()
const archiveSlot = <div className='bg-gray-300 dark:bg-gray-500 rounded-md text-gray-50 px-1 text-xs'>{postCount}</div>
const defaultLinks = [
{ icon: 'fas fa-home', name: locale.NAV.INDEX, to: '/' || '/', show: true },
{ icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_NEXT.MENU_CATEGORY },
{ icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_NEXT.MENU_TAG },
{ icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', slot: archiveSlot, show: CONFIG_NEXT.MENU_ARCHIVE }
]
let links = [].concat(defaultLinks)
if (customNav) {
links = defaultLinks.concat(customNav)
}
// 如果 开启自定义菜单则覆盖Page生成的菜单
if (BLOG.CUSTOM_MENU) {
links = customMenu
}
return (
<>
{/* 大屏模式菜单 */}
<nav id='nav' className='hidden md:block leading-8 text-gray-500 dark:text-gray-400 font-sans'>
{links.map(link => link && link.show && <DropMenu key={link.id} link={link} />)}
</nav>
{/* 移动端菜单 */}
<div id='nav-menu-mobile' className='block md:hidden my-auto justify-start bg-white'>
{links?.map(link => link && link.show && <CollapseMenu onHeightChange={props.onHeightChange} key={link.id} link={link} />)}
</div>
</>
)
}
export default MenuButtonGroup