mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-06-09 07:26:47 +00:00
slug 调整兼容已有主题
This commit is contained in:
@@ -1,41 +1,55 @@
|
||||
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'
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import Link from 'next/link'
|
||||
import { useRef, useState } from 'react'
|
||||
import CONFIG from '../config'
|
||||
import { MenuItemCollapse } from './MenuItemCollapse'
|
||||
import { MenuItemDrop } from './MenuItemDrop'
|
||||
import { SvgIcon } from './SvgIcon'
|
||||
|
||||
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 />}
|
||||
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>
|
||||
|
||||
</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>
|
||||
<NavBar {...props} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const NavBar = props => {
|
||||
@@ -48,11 +62,39 @@ const NavBar = 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) }
|
||||
{
|
||||
id: 2,
|
||||
name: locale.NAV.RSS,
|
||||
href: '/feed',
|
||||
show:
|
||||
siteConfig('ENABLE_RSS') &&
|
||||
siteConfig('NOBELIUM_MENU_RSS', null, CONFIG),
|
||||
target: '_blank'
|
||||
},
|
||||
{
|
||||
icon: 'fas fa-search',
|
||||
name: locale.NAV.SEARCH,
|
||||
href: '/search',
|
||||
show: siteConfig('NOBELIUM_MENU_SEARCH', null, CONFIG)
|
||||
},
|
||||
{
|
||||
icon: 'fas fa-archive',
|
||||
name: locale.NAV.ARCHIVE,
|
||||
href: '/archive',
|
||||
show: siteConfig('NOBELIUM_MENU_ARCHIVE', null, CONFIG)
|
||||
},
|
||||
{
|
||||
icon: 'fas fa-folder',
|
||||
name: locale.COMMON.CATEGORY,
|
||||
href: '/category',
|
||||
show: siteConfig('NOBELIUM_MENU_CATEGORY', null, CONFIG)
|
||||
},
|
||||
{
|
||||
icon: 'fas fa-tag',
|
||||
name: locale.COMMON.TAGS,
|
||||
href: '/tag',
|
||||
show: siteConfig('NOBELIUM_MENU_TAG', null, CONFIG)
|
||||
}
|
||||
]
|
||||
if (customNav) {
|
||||
links = links.concat(customNav)
|
||||
@@ -68,18 +110,35 @@ const NavBar = props => {
|
||||
}
|
||||
|
||||
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>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user