File size: 2,329 Bytes
1b72d7e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
import { useGlobal } from '@/lib/global'
import CONFIG from '../config'
import { MenuItemDrop } from './MenuItemDrop'
import FullScreenButton from '@/components/FullScreenButton'
import InformationButton from './InformationButton'
import LogoBar from './LogoBar'
import { siteConfig } from '@/lib/config'
/**
* 桌面端底部导航
* @param {*} props
* @returns
*/
const BottomNav = props => {
return <>
<div id="bottom-nav" className={'dark:bg-black dark:bg-opacity-50z-20 px-4 hidden glassmorphism md:fixed bottom-0 w-screen py-4 md:flex flex-row justify-between items-center'}>
{/* 左侧logo文字栏 */}
<LogoBar {...props}/>
{/* 右下角菜单栏 */}
<MenuList {...props} />
</div>
</>
}
/**
* 菜单
* @param {*} props
* @returns
*/
const MenuList = props => {
const { customMenu, customNav } = props
const { locale } = useGlobal()
let links = [
{ id: 2, name: locale.NAV.RSS, to: '/feed', show: siteConfig('ENABLE_RSS') && siteConfig('NOBELIUM_MENU_RSS', null, CONFIG), target: '_blank' },
{ icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('NOBELIUM_MENU_SEARCH', null, CONFIG) },
{ icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('NOBELIUM_MENU_ARCHIVE', null, CONFIG) },
{ icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('NOBELIUM_MENU_CATEGORY', null, CONFIG) },
{ icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('NOBELIUM_MENU_TAG', null, CONFIG) }
]
if (customNav) {
links = links.concat(customNav)
}
// 如果 开启自定义菜单，则覆盖Page生成的菜单
if (siteConfig('CUSTOM_MENU')) {
links = customMenu
}
if (!links || links.length === 0) {
return null
}
return (
<div className="flex-shrink-0">
<ul className="hidden md:flex flex-row">
{links?.map((link, index) => <MenuItemDrop key={index} link={link} />)}
<li className='my-auto px-2'>
<FullScreenButton />
</li>
<li className='my-auto px-2'>
<InformationButton/>
</li>
</ul>
</div>
)
}
export default BottomNav
|