File size: 3,692 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 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
import { useRef, useState } from 'react'
import Link from 'next/link'
import { useGlobal } from '@/lib/global'
import CONFIG from '../config'
import { SvgIcon } from './SvgIcon'
import { MenuItemDrop } from './MenuItemDrop'
import Collapse from '@/components/Collapse'
import { MenuItemCollapse } from './MenuItemCollapse'
import LazyImage from '@/components/LazyImage'
import { siteConfig } from '@/lib/config'
const Header = props => {
const { fullWidth, siteInfo } = props
const title = siteConfig('TITLE')
return <div className='md:hidden fixed top-0 w-full z-20'>
<div id="sticky-nav"
className={`sticky-nav m-auto w-full h-6 flex flex-row justify-between items-center mb-2 md:mb-12 py-8 glassmorphism ${!fullWidth ? 'max-w-3xl px-4' : 'px-4 md:px-24'
}`} >
<Link href="/" aria-label={siteConfig('title')} className="flex items-center">
<>
<div className="h-6 w-6">
{/* <SvgIcon/> */}
{siteConfig('NOBELIUM_NAV_NOTION_ICON', null, CONFIG)
? <LazyImage src={siteInfo?.icon} width={24} height={24} alt={siteConfig('AUTHOR')} />
: <SvgIcon />}
</div>
<p className="ml-2 font-medium text-gray-800 dark:text-gray-300 header-name">
{title} {/* ,{' '}<span className="font-normal">{siteConfig('HOME_BANNER_IMAGE')}</span> */}
</p>
</>
</Link>
<NavBar {...props} />
</div>
</div>
}
const NavBar = props => {
const { customMenu, customNav } = props
const [isOpen, changeOpen] = useState(false)
const toggleOpen = () => {
changeOpen(!isOpen)
}
const collapseRef = useRef(null)
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} />)}
</ul>
<div className='md:hidden'><i onClick={toggleOpen} className='fas fa-bars cursor-pointer px-5 block md:hidden'></i>
<Collapse collapseRef={collapseRef} isOpen={isOpen} type='vertical' className='fixed top-16 right-6'>
<div className='dark:border-black bg-white dark:bg-black rounded border p-2 text-sm'>
{links?.map((link, index) => <MenuItemCollapse key={index} link={link} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)} />)}
</div>
</Collapse>
</div>
</div>
)
}
export default Header
|